Kalau kamu menganggap membuat website itu seperti membangun rumah, maka HTML adalah susunan bata dan semennya (strukturnya), sedangkan CSS adalah cat dinding, desain interior, hingga pemilihan model gordennya.

1. Penjelasan Konsep

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan visual sebuah dokumen web. CSS bukan bahasa pemrograman seperti JavaScript atau Python, melainkan bahasa stylesheet.

Mengapa CSS itu penting?

1. Pemisahan Tugas: HTML fokus pada konten (apa isinya), CSS fokus pada presentasi (bagaimana bentuknya).
2. Efisiensi: Kamu bisa mengatur ribuan halaman web hanya dengan satu file CSS saja.
3. Responsif: CSS memungkinkan website kamu tampil bagus di laptop maupun di layar HP yang kecil.

2. Contoh Kode

Bayangkan kita punya sebuah judul (<h1>). Mari kita lihat perbedaan antara HTML polos dengan yang sudah diberi "sentuhan" CSS.

HTML Tanpa CSS:

<h1>Selamat Datang di Kelas Web</h1>

Hasilnya: Teks akan berwarna hitam, font standar (Times New Roman), dan rapat ke kiri.

HTML dengan CSS:

/* Inilah cara kita menulis aturan CSS */
h1 {
    color: #2ecc71;          /* Mengubah warna teks menjadi hijau */
    font-family: 'Poppins';  /* Mengubah jenis huruf */
    text-align: center;      /* Membuat teks berada di tengah */
    font-size: 40px;         /* Memperbesar ukuran teks */
}

3. Analisis Kode

Struktur dasar CSS terdiri dari tiga bagian utama yang disebut sebagai CSS Rule:

• Selector (h1): Ini adalah bagian untuk "memilih" elemen mana yang ingin kamu hias. Dalam contoh di atas, kita memilih semua elemen <h1>.
• Property (color, font-family): Ini adalah atribut yang ingin kamu ubah.
• Value (#2ecc71, center): Ini adalah nilai atau pengaturan yang kamu berikan kepada properti tersebut.

Setiap pasangan Property: Value harus diakhiri dengan titik koma (;) dan dibungkus dalam kurung kurawal { ... }.

4. Best Practice

Ada beberapa hal yang perlu kamu ingat di awal:

• Jangan Hafalkan Semua Properti: Ada ratusan properti CSS. Jangan merasa harus menghafal semuanya sekarang. Cukup pahami logikanya: "Bagaimana cara saya memilih elemen ini, dan apa yang ingin saya ubah?" Sisanya, kamu bisa cari di Google atau dokumentasi seperti MDN.
• Case Sensitive: Meski CSS tidak terlalu ketat, biasakan menulis kode dengan huruf kecil semua (lowercase) agar konsisten dan profesional.
• Gunakan Komentar: Gunakan /* komentar */ untuk memberi catatan pada kodemu. Ini sangat membantu saat kamu (atau rekan timmu) membaca kode tersebut di kemudian hari.