Apa Itu Cascading Stylesheets (CSS)?

Apa itu cascading stylesheets (CSS)? Seperti apa itu cascading stylesheets (CSS)? Bagaimana cara menggunakan CSS untuk website? Ada berapa jenis penulisan CSS?

CSS atau cascading stylesheets adalah suatu bahasa yang digunakan untuk memberikan visualisasi tampilan pada website. CSS menjelaskan pada komputer bagaimana tampilan website yang ditampilkan seperti warna, tata letak, ukuran teks, jenis font, dan lainnya. Tentunya CSS tidak dapat berdiri sendirian. CSS membutuhkan HTML untuk struktur website. Ibaratnya badan manusia, CSS merupakan kulit dan bajunya, sedangkan HTML adalah tulangnya. CSS dapat melakukan format halaman, yang mana kemampuan memformatnya lebih baik daripada HTML.

Baca juga :
Pengertian Tokenisasi ICO, STO, TSO, dan IEO
Struktur Dasar Penyusun HTML(Tag, Elemen, dan Attribut)

Umur CSS sudah mencapai ¼ abad atau 25 tahun. CSS dibuat dan dikembangkan pada tahun 1996 oleh World Wide Consortium (W3C). Pada saat itu website baru saja ada dan tampilan website sangat sederhana. Oleh karena itu, CSS dibuat untuk menambahkan keindahan pada website. Website pertama yang dapat diakses menggunakan internet belum sebagus website – website sekarang, yaiyalah kan cuma HTML. Bahkan isi konten dari website pertama yang dapat diakses menggunakan internet hanya berisi teks dan hyperlink saja. Klik disini untuk melihat website pertama di dunia.

Untuk lebih memahami apa itu CSS dan kegunaannya, mari kita lihat gambar berikut ini :

1. Kode dan hasil sebelum menerapkan CSS ke HTML :

Apa Itu Cascading Stylesheets (CSS)?

Apa Itu Cascading Stylesheets (CSS)?

2. Kode dan hasil setelah menerapkan CSS ke HTML :

Apa Itu Cascading Stylesheets (CSS)?

Apa Itu Cascading Stylesheets (CSS)?

Terlihat perbedaan dari gambar pertama dan gambar kedua. Gambar pertama hanya menggunakan HTML saja sehingga tampilannya membosankan. Sedangkan gambar kedua adalah perpaduan HTML dan CSS yang hasil tampilan websitenya lebih menarik.

Bagaimana cara menggunakan CSS?

CSS dapat digunakan dengan tiga cara berbeda, yaitu inline style, internal style, dan eksternal style. Mari kita bahas satu persatu.

1) Inline Style

Sesuai dengan artinya yaitu berada satu baris, CSS dengan style ini diberikan satu baris dengan tag HTML sepeti gambar berikut ini :

Apa Itu Cascading Stylesheets (CSS)?

2) Internal Style

CSS ditulis tidak sebaris dengan tag HTML, tetapi ditulis di dalam tag HTML <head> di dalam tag HTML <style> </style>.  Untuk menggunakan CSS dengan gaya internal style, kita wajib menggunakan tag HTML <style></style>. Seperti berikut ini :

Apa Itu Cascading Stylesheets (CSS)?

Jika dipehatikan, kita menemukan hal – hal baru pada kode yaitu p, kurung kurawal, dll. Itu semua disebut CSS syntax atau ruleset. CSS syntax terdiri dari dua bagian, yaitu selector dan declaration block. Selector menandakan elemen HTML mana yang diberi CSS, misalnya pada gambar di atas selector adalah elemen HTML p. Sedangkan declaration block adalah tempat untuk mendeklarasikan bagaimana elemen HTML yang dijadikan selector, misalnya pada contoh diatas elemen HTML p sebagai selector yang penampilannya ditentukan di dalam kurung kurawal setelah elemen HTML p.

3) External Style

Sama seperti internal style, external style memisahkan CSS dengan HTML. Bedanya, CSS dipisahkan dari file HTML atau memiliki file CSS sendiri. Penggunaannya cukup mudah. Pertama buat file CSS lalu isi dengan CSS syntax yang selectornya sesuai dengan elemen HTML di file HTML yang mau diberi CSS. Hanya elemen yang mau diberikan CSS yang dibuat selectornya di file CSS. Lalu tambahkan tag HTML <link> di bagian dalam tag head. Kemudian ubah tag menjadi seperti yang dilingkari pada gambar berikut (url css sesuaikan dengan tempat di mana file CSS Anda disimpan) :

Apa Itu Cascading Stylesheets (CSS)?

Lalu isi file mystyle.css dengan kode berikut :

Apa Itu Cascading Stylesheets (CSS)?

Semua cara diatas boleh digunakan. Tetapi alangkah baiknya memisahkan file HTML dan CSS agar lebih rapi dan lebih mudah diedit jika diperlukan perubahan.

Baca juga : Tutorial Membuat Form HTML

Sekian, terimakasih, dan semoga bermanfaat:)