Langsung ke konten utama

Apa Itu CSS? Pengertian, Fungsi, dan Cara Kerjanya - Kodegua

 


CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.

 

CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.

 

Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.

 

HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.

 

Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website. Tentunya Anda tidak ingin website terlihat seperti situs yang ‘telanjang’ tanpa modifikasi apa pun, bukan?


Kelebihan CSS

Mudah bagi Anda untuk mengetahui mana website yang menggunakan CSS dan mana yang tidak.

 

Anda pasti pernah membuka website, tapi sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS pada situs tersebut tidak dapat di-load dengan benar atau situs sama sekali tidak memiliki CSS. Umumnya, situs seperti ini hanya menerapkan HTML.

 

Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML. Itu berati Anda harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah.

 

Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain.

 

Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir.

 

Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai macam style pada satu halaman HTML.

 

Cara Kerja CSS

CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh: <p>This is a paragraph.</p>.

 

Satu yang menjadi pertanyaannya sekarang, bagaimana caranya style paragraf? Struktur syntax CSS cukup sederhana. Struktur ini memiliki selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan terhadap elemen tersebut. Sangat mudah, kan?

 

Ada berbagai rule yang harus diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.

 

Selector mengarah ke elemen HTML yang ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.

 

Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.

 

Mari kita lihat contoh di bawah ini:

 

Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold).

 

<style>

p {

 color: blue;

 text-weight: bold;

}

<style>

Contoh lain, semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16x, dan berwarna pink.

 

<style>

p {

   text-align: center;

   font-size: 16px;

   color: pink;

 

}

</style>

Lihat CSS cheat sheet untuk contoh yang lain.

 

Mari kita bahas beberapa style CSS, yakni Inline, External, dan Internal.

 

CSS Style Internal, External, dan Inline

Kami akan membahas masing-masing CSS Style secara singkat. Untuk informasi atau pembahasan yang lebih mendalam, kami menyertakan link di bawah ikhtisar.

 

CSS Style Internal diload setiap kali website di-refresh, dan kekurangannya adalah waktu loading semakin lama. CSS style yang sama pun tidak dapat digunakan di halaman lain karena sudah aktif terlebih dulu di suatu halaman.

 

Namun di balik kekurangannya, CSS Style Internal memiliki beberapa kelebihan. Salah satunya adalah kemudahan dalam sharing template untuk pratinjau (preview) karena CSS hanya ada di satu halaman.

 

External merupakan CSS style yang paling mudah dan tidak menyulitkan. Semuanya dilakukan secara eksternal pada file .css. Styling dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang Anda inginkan. Sayangnya, CSS Style External juga memperlama waktu loading.

 

CSS Style Inline menggunakan elemen spesifik yang memuat tag <style>. Karena setiap komponen harus di-stylize, maka Inline bukan metode yang tepat jika Anda ingin menggunakan CSS dengan cepat.

 

Namun di sisi lain, hal tersebut mendatangkan keuntungan. Misalnya, jika Anda ingin mengubah satu elemen, atau menampilkan pratinjau dengan cepat, atau Anda tidak punya akses ke file CSS.

Kesimpulan

Berikut beberapa poin yang dapat disimpulkan dari artikel ini:

 

CSS dibuat untuk dapat bekerja bersama dengan bahasa markup seperti HTML. Biasanya CSS digunakan untuk mengatur tampilan halaman.

Ada tiga style di CSS, dan untuk menerapkan CSS di banyak halaman pada waktu bersamaan, gunakan External style.

Saat ini sudah banyak website yang menggunakan CSS. Hal ini dikarenakan CSS adalah salah satu bahasa markup yang diwajibkan ada.

Semoga artikel ini dapat berguna bagi Anda. Jika punya pertanyaan tentang apa itu CSS, silakan tuliskan pada kolom komentar di bawah ini.


Komentar

Postingan populer dari blog ini

Mengenal JavaScript: Apa itu JavaScript? Apa kegunaan JavaScript? - KodeGua

   Apa itu JavaScript? JavaScript adalah bahasa pemrograman yang sering digunakan untuk mengembangkan aplikasi web interaktif. Ini adalah salah satu komponen utama dari teknologi web bersama dengan HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets). JavaScript digunakan oleh pengembang web untuk memberikan fungsi interaktif, mengubah konten halaman secara dinamis, mengelola kejadian, dan berkomunikasi dengan server untuk mengambil atau mengirim data. Apa kegunaan JavaScript? JavaScript memiliki banyak kegunaan dalam pengembangan web dan aplikasi. Berikut beberapa di antaranya: Interaksi Pengguna:  Salah satu kegunaan utama JavaScript adalah untuk meningkatkan interaksi pengguna di situs web. Anda dapat menggunakan JavaScript untuk menangani tindakan pengguna seperti klik tombol, mengisi formulir, menggulir halaman, dan menampilkan atau menyembunyikan elemen-elemen halaman secara dinamis. Manipulasi DOM:  JavaScript memungkinkan Anda untuk mengakses dan...

Apa itu PHP ? Fungsinya ? Pengertian PHP dasar untuk pemula - KodeGua

  Apa itu PHP ? Fungsinya ? Pengertian PHP dasar untuk pemula Jika Anda baru dalam dunia pengembangan web, PHP (Hypertext Preprocessor) adalah salah satu bahasa yang mungkin akan Anda temui. PHP adalah bahasa pemrograman server-side yang digunakan secara luas untuk mengembangkan berbagai jenis situs web dan aplikasi web. Dalam artikel ini, kami akan membahas pengertian dasar PHP untuk pemula, fungsinya, dan mengapa PHP menjadi begitu penting dalam pengembangan web. Apa itu PHP? PHP adalah singkatan dari "Hypertext Preprocessor." Meskipun singkatan ini awalnya merupakan rekursif (mengandung dirinya sendiri), namun sekarang ini lebih sering dianggap sebagai singkatan dari " PHP : Hypertext Preprocessor." PHP adalah bahasa pemrograman yang dapat dijalankan di sisi server, artinya kode PHP dieksekusi di server web tempat situs web Anda di-host, dan hasilnya dikirimkan ke peramban (browser) pengguna. Mengapa PHP Penting dalam Pengembangan Web? PHP telah menjadi salah sa...

Apa itu HTML ? Fungsi dan Cara Kerjanya ? - KodeGua

 Apa Itu HTML ? HTML adalah singkatan dari Hypertext Markup Language yaitu bahasa markup standar untuk membuat dan menyusun halaman dan aplikasi web. Biasanya, penggunaan umum HTML adalah untuk menyusun bagian paragraf, heading, maupun link pada halaman web. Tapi, meskipun susunannya seperti coding, perlu diketahui bahwa HTML bukanlah bahasa pemrograman. HTML tidak dianggap sebagai bahasa pemrograman karena tidak bisa memberikan fungsi yang dinamis. Sekarang, bahasa markup ini dianggap sebagai standar web resmi, dikelola oleh World Wide Web Consortium (W3C), yang juga bertugas merilis pembaruan rutin HTML . Nah, di artikel ini, selain membahas tentang apa itu HTML , kami juga akan membahas sejarah, cara kerja HTML , dan lain sebagainya. Selamat membaca! Pengertian HTML dan Sejarahnya Hypertext Markup Language atau HTML adalah bahasa markup standar yang digunakan untuk membuat halaman website dan aplikasi web. Sejarah HTML diciptakan oleh Tim Berners-Lee, seorang ahli fisika di lem...