Materi
HTML menyusun isi, CSS mengatur tampilannya. Satu aturan CSS terdiri dari selektor dan blok deklarasi. Selektor menyebut elemen mana yang kena. Blok deklarasi ditulis di dalam kurung kurawal. Setiap deklarasi berisi nama properti, titik dua, nilai, lalu titik koma. Di kelas ini, aturan ditulis di dalam elemen style pada halaman yang sama.
| Selektor | Bentuk | Mengenai |
|---|---|---|
| Tipe | p | Semua elemen p di halaman |
| Kelas | .kartu | Elemen yang punya class="kartu" |
| Id | #kontak | Satu elemen yang punya id="kontak" |
| Keturunan | nav a | Semua a yang berada di dalam nav |
<style>
body { font-family: sans-serif; color: #2b2b3c; }
h1 { color: #7051c4; }
.sorot { background-color: #fff3c4; }
#kontak { color: rgb(47 125 93); }
nav a { color: #1a5fb4; }
</style>Warna bisa ditulis dengan tiga cara yang setara: nama warna seperti teal, kode heksadesimal seperti #7051c4, atau fungsi rgb dengan tiga angka 0 sampai 255. Properti color mengubah warna teks. background-color mengubah warna latar. font-family berisi daftar nama huruf; browser mencobanya dari kiri ke kanan sampai ada yang tersedia di perangkat pembaca.
Bagaimana kalau dua aturan mengubah properti yang sama pada elemen yang sama? Browser memakai selektor yang lebih spesifik: id mengalahkan kelas, dan kelas mengalahkan tipe. Kalau sama kuat, aturan yang ditulis belakangan yang menang. Jadi kalau aturanmu tampak tidak berlaku, cek dulu apakah ia kalah dari aturan lain.
Selektor juga bisa menyebut keadaan elemen lewat kelas semu, ditulis dengan titik dua setelah selektornya. hover berlaku selama penunjuk tetikus ada di atas elemen. focus-visible berlaku saat elemen menerima fokus dan penandanya perlu terlihat, misalnya saat pengguna menekan tombol Tab.
