CSS
CSS (Cascading Style Sheets) memungkinkan Anda membuat halaman web yang tampak hebat, tetapi bagaimana cara kerjanya? Artikel ini menjelaskan apa itu CSS dengan contoh sintaks sederhana dan juga mencakup beberapa istilah kunci tentang bahasa tersebut.
Dalam modul Pengenalan HTML, telah membahas apa itu HTML dan bagaimana HTML digunakan untuk menandai dokumen. Dokumen-dokumen ini akan dapat dibaca di browser web. Judul akan terlihat lebih besar dari teks biasa, paragraf pecah menjadi baris baru dan memiliki spasi di antaranya. Tautan diwarnai dan digarisbawahi untuk membedakannya dari teks lainnya. Apa yang Anda lihat adalah gaya default browser — gaya yang sangat mendasar — yang diterapkan browser ke HTML untuk memastikan bahwa halaman pada dasarnya dapat dibaca meskipun tidak ada gaya eksplisit yang ditentukan oleh pembuat halaman.
Namun, web akan menjadi tempat yang membosankan jika semua situs web terlihat seperti itu. Dengan menggunakan CSS, Anda dapat mengontrol dengan tepat bagaimana elemen HTML terlihat di browser, menampilkan markup Anda menggunakan desain apa pun yang Anda suka.
Untuk apa CSS-nya?
Seperti yang telah kami sebutkan sebelumnya, CSS adalah bahasa untuk menentukan bagaimana dokumen disajikan kepada pengguna — bagaimana mereka ditata, dll.
Dokumen biasanya berupa file teks yang terstruktur menggunakan bahasa markup — HTML adalah bahasa markup yang paling umum, tetapi Anda mungkin juga menemukan bahasa markup lain seperti SVG atau XML.
Menyajikan dokumen kepada pengguna berarti mengubahnya menjadi bentuk yang dapat digunakan oleh audiens Anda. Browser, seperti Firefox, Chrome, atau Edge, dirancang untuk menyajikan dokumen secara visual, misalnya, di layar komputer, proyektor, atau printer.
CSS dapat digunakan untuk penataan teks dokumen yang sangat mendasar — misalnya, untuk mengubah warna dan ukuran judul dan tautan. Ini dapat digunakan untuk membuat tata letak — misalnya, mengubah satu kolom teks menjadi tata letak dengan area konten utama dan bilah sisi untuk informasi terkait. Bahkan dapat digunakan untuk efek seperti animasi. Lihat tautan di paragraf ini untuk contoh spesifik.
Sintaks CSS
CSS adalah bahasa berbasis aturan — Anda menentukan aturan dengan menentukan grup gaya yang harus diterapkan ke elemen atau grup elemen tertentu di halaman web Anda.
Misalnya, Anda dapat memutuskan untuk menampilkan judul utama pada halaman Anda sebagai teks merah besar. Kode berikut menunjukkan aturan CSS yang sangat sederhana yang akan mencapai gaya yang dijelaskan di atas:
h1 {
color: red;
font-size: 5em;
}
- Dalam contoh di atas, aturan CSS dibuka dengan selector. Ini memilih elemen HTML yang akan kita modifikasi. Dalam hal ini, menata heading level satu (
<h1>). - Kemudian memiliki satu set kurung kurawal
{}. - Di dalam kurung kurawal akan ada satu atau lebih deklarasi, yang berbentuk pasangan properti dan nilai. Kita menentukan properti (warna dalam contoh di atas) sebelum titik dua, dan menentukan nilai properti setelah titik dua (merah dalam contoh ini).
- Contoh ini berisi dua deklarasi, satu untuk warna dan yang lainnya untuk ukuran font. Setiap pasangan menentukan properti dari elemen yang kita pilih (
<h1>dalam kasus ini), kemudian nilai yang ingin kita berikan pada properti tersebut.
Properti CSS memiliki nilai yang diizinkan berbeda, bergantung pada properti mana yang ditentukan. Dalam contoh ini, memiliki properti warna, yang dapat mengambil berbagai nilai warna. juga memiliki properti font-size. Properti ini dapat mengambil berbagai unit ukuran sebagai nilai.
Sebuah stylesheet CSS akan berisi banyak aturan seperti itu, yang ditulis satu demi satu.
h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}