Pengertian

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendeskripsikan tampilan dan format dari dokumen HTML. CSS mengontrol warna, font, tata letak, dan berbagai aspek visual lainnya. Dengan memisahkan CSS dari HTML, kita dapat mengelola desain situs dengan lebih mudah dan efisien. CSS bekerja dengan aturan yang terdiri dari selektor (untuk memilih elemen HTML) dan deklarasi (untuk menerapkan gaya).

Analogi

Analogi: Mendekorasi Rumah
Jika HTML adalah kerangka rumah, maka CSS adalah semua elemen dekorasinya: warna cat dinding, jenis lantai, model gorden, hingga tata letak perabotan. CSS-lah yang membuat rumah (website) menjadi indah dan nyaman untuk dilihat.

Contoh Kode & Hasil

1. Selektor Elemen/Tag

Menargetkan semua elemen dengan tag yang sama.

Semua paragraf akan menjadi biru.

Paragraf ini juga akan menjadi biru.

p {
  color: #2563eb;
  font-family: sans-serif;
}

2. Selektor Class

Menargetkan semua elemen yang memiliki atribut class yang sama. Diawali dengan titik (.).

Ini adalah kotak peringatan.

Div ini juga menggunakan class yang sama.

/* Di file CSS */
.peringatan {
  background-color: #fef9c3;
  color: #ca8a04;
}

<!-- Di file HTML -->
<p class="peringatan">Ini adalah kotak peringatan.</p>

3. Selektor ID

Menargetkan satu elemen unik yang memiliki atribut id. Diawali dengan tanda pagar (#).

Judul Utama Halaman

/* Di file CSS */
#judul-utama {
  border-bottom: 2px solid blue;
  padding-bottom: 4px;
}

<!-- Di file HTML -->
<h1 id="judul-utama">Judul Utama Halaman</h1>

Latihan Mandiri

Tugas: Styling Halaman Biodata

Buka kembali file tentang-saya.html dari latihan HTML sebelumnya.
Buat file CSS baru bernama style.css dan hubungkan ke file HTML Anda menggunakan tag <link>.
Gunakan selektor tag untuk membuat semua teks di <body> menggunakan font sans-serif dan warna teks abu-abu terang (#d1d5db).
Beri class .nama-besar pada <h1> Anda dan buat warnanya menjadi biru muda (#60a5fa).
Beri id #deskripsi pada <p> Anda dan buat teksnya menjadi miring (font-style: italic) dan sedikit lebih besar (font-size: 18px).

Kesimpulan

Pada pertemuan ini, kita telah mempelajari fondasi CSS. Kita tahu bahwa CSS digunakan untuk mendesain, dan kita bisa melakukannya dengan menargetkan elemen HTML menggunakan selektor. Memahami perbedaan antara selektor tag, class, dan ID adalah langkah pertama yang krusial untuk bisa mengontrol tampilan website secara presisi. Memisahkan CSS ke dalam file eksternal adalah praktik terbaik untuk kode yang bersih dan mudah dikelola.