Apa itu CSS & Cara Menulisnya
Mengenal CSS, fungsinya mempercantik HTML, bentuk aturan (selector, properti, nilai), dan tiga cara memasangnya.
Apa itu CSS?
CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan halaman web: warna, ukuran huruf, jarak, tata letak, bahkan animasi. Kalau HTML adalah rangka rumah, CSS adalah cat, lantai, dan dekorasinya.
Tanpa CSS, semua halaman web tampil polos: teks hitam di latar putih. Dengan CSS, HTML yang sama bisa terlihat sangat berbeda.
Bentuk sebuah aturan CSS
h1 {
color: blue;
font-size: 32px;
}| Bagian | Contoh | Artinya |
|---|---|---|
| Selector | h1 | Elemen mana yang mau di-style |
| Blok deklarasi | { ... } | Kumpulan perintah gaya |
| Properti | color | Apa yang diubah |
| Nilai | blue | Diubah menjadi apa |
| Deklarasi | color: blue; | Pasangan properti dan nilai, diakhiri titik koma |
Bacanya: "Untuk semua h1, atur warna teks menjadi biru dan ukuran huruf menjadi 32 piksel."
Aturan penulisan
- Setiap deklarasi diakhiri titik koma
;. - Properti dan nilai dipisah titik dua
:. - Spasi dan baris baru tidak berpengaruh; tulis rapi supaya mudah dibaca.
- Komentar CSS ditulis
/* seperti ini */.
Tiga cara memasang CSS
| Cara | Contoh | Catatan |
|---|---|---|
| Inline | <p style="color: red"> | Hanya untuk satu elemen. Hindari kecuali darurat. |
| Internal | <style> ... </style> di head | Cocok untuk satu halaman |
| Eksternal | <link rel="stylesheet" href="style.css"> | Terbaik: satu berkas untuk banyak halaman |
Di kursus ini, editor di sebelah kanan adalah berkas CSS (style.css). Halaman HTML-nya sudah disediakan; tugasmu hanya menulis CSS dan melihat hasilnya di panel pratinjau.
Kebiasaan baik: ubah satu nilai lalu lihat hasilnya. Mengubah angka, mengganti warna, dan mencoba hal aneh adalah cara belajar CSS tercepat.