BLANTERORIONv101
Home CSS

🎨 Mengenal CSS: Jiwa Estetika Web dan Kekuatan Style Cascade

12 Desember 2025
 
🎨 Mengenal CSS: Jiwa Estetika Web dan Kekuatan Style Cascade

🎨 Mengenal CSS: Jiwa Estetika di Balik HTML

Jika HTML adalah kerangka (struktur) dan tag semantik memberinya makna, maka CSS (Cascading Style Sheets) adalah pakaian dan riasan yang membuatnya menarik. CSS adalah bahasa yang mengatur styling dan tata letak halaman web Anda, memisahkannya sepenuhnya dari struktur HTML.

Mengapa Memisahkan Style dari Struktur?

Memisahkan HTML dan CSS adalah praktik terbaik dalam pengembangan web modern (Separation of Concerns). Ini memiliki dua manfaat utama:

1. Efisiensi: Anda dapat mengubah tampilan seluruh situs web (ribuan halaman) hanya dengan memodifikasi satu file style.css.

2. Keterbacaan: Kode HTML tetap bersih, fokus pada makna, sementara kode CSS fokus pada tampilan.

Struktur Dasar Aturan CSS

Setiap aturan CSS terdiri dari tiga bagian utama: Selector, Property, dan Value.

Contoh sederhana:

h1 {
  color: blue;
  font-size: 24px;
}

Selector (h1): Menentukan elemen HTML mana yang akan di-style.

Property (color): Atribut styling yang ingin diubah.

Value (blue): Nilai yang diberikan pada Property tersebut.

Cara Menghubungkan CSS dengan HTML

Ada tiga cara untuk menerapkan CSS ke dokumen HTML Anda, tetapi Eksternal adalah yang paling sering digunakan:

  1. CSS Eksternal: Menghubungkan file style.css terpisah menggunakan tag <link> di dalam <head>: <link rel="stylesheet" href="style.css">
  2. CSS Internal: Ditulis di antara tag <style> di dalam <head> (biasanya hanya untuk halaman tunggal).
  3. CSS Inline: Ditulis langsung di dalam tag HTML menggunakan atribut style (seperti <p style="color: red;">). Cara ini sangat tidak disarankan karena mencampur struktur dan gaya.

Model Kotak (The Box Model)

Memahami bagaimana CSS bekerja sangat bergantung pada pemahaman Model Kotak. Semua elemen HTML dianggap sebagai kotak persegi panjang. Model Kotak ini terdiri dari lapisan-lapisan dari dalam ke luar:

  1. Content: Isi sebenarnya (teks, gambar). 
  2. Padding: Ruang di sekitar konten, di dalam batas (border). 
  3. Border: Batas atau bingkai di sekitar padding dan content. 
  4. Margin: Ruang kosong di luar batas (border), digunakan untuk memisahkan kotak dari elemen lain.

Penguasaan Model Kotak adalah kunci untuk menata tata letak (layout) dan mengatur jarak antar elemen di halaman web Anda.

Komentar