CSS

Definisi

CSS adalah bahasa untuk mengatur tampilan visual, layout, dan responsif halaman web.

Fungsi

CSS dipakai untuk mengatur warna, ukuran, jarak, posisi, grid, flexbox, animasi ringan, dan adaptasi tampilan di berbagai ukuran layar. Tanpa CSS, HTML tetap bisa dibaca, tetapi tampilannya masih mentah dan belum siap dipakai sebagai antarmuka yang nyaman.

Konsep Dasar

CSS bekerja dengan memilih elemen lalu memberi style pada elemen tersebut.

Konsep inti yang perlu dipahami:

• Selector: memilih elemen yang akan diberi style
• Property: nama properti seperti color, padding, atau display
• Value: nilai dari properti
• Cascade: aturan prioritas style
• Specificity: bobot selector saat terjadi konflik
• Box model: content, padding, border, margin

Contoh

css

.card {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
}
 
.card h2 {
  margin-top: 0;
}

Penjelasan

Selector .card menargetkan elemen dengan class card. Properti padding memberi ruang di dalam elemen, border memberi garis tepi, border-radius membulatkan sudut, dan background mengatur latar belakang.

Bagian .card h2 menargetkan heading di dalam card dan menghapus margin atas agar jarak visualnya lebih rapat. Ini contoh kecil, tapi pola kerjanya sama untuk layout yang lebih besar.

Catatan Implementasi

• Gunakan class naming yang konsisten.
• Hindari selector yang terlalu dalam karena sulit dirawat.
• Pakai variabel CSS untuk warna atau spacing yang dipakai berulang.
• Pahami box model sebelum mengutak-atik spacing.
• Susun layout responsif sejak awal, bukan setelah desain jadi besar.
• Jangan terlalu bergantung pada !important.

Istilah

• Selector: pola untuk memilih elemen.
• Cascade: mekanisme prioritas rule CSS.
• Specificity: bobot selector saat konflik style.
• Box model: model ruang elemen di CSS.