Apa itu css dan contoh kode css adalah dua hal dasar yang wajib kalian kuasai untuk membuat tampilan website yang rapi, konsisten, dan enak dilihat.
Halo teman-teman, semoga kalian semangat belajar front-end hari ini. Pada artikel ini kodelyly.com akan membahas dari pengertian CSS, bagaimana cara kerjanya, hingga contoh kode yang langsung bisa kalian pakai di proyek kecil kalian.
Apa Itu CSS
CSS (Cascading Style Sheets) adalah bahasa style sheet yang mengatur tampilan elemen HTML: warna, ukuran huruf, jarak (margin/padding), tata letak, hingga efek animasi sederhana. Kata “cascading” berarti aturan bisa saling menimpa berdasarkan urutan dan tingkat prioritas (specificity).
Dengan CSS, konten (HTML) dipisahkan dari presentasi (gaya), sehingga kode lebih terstruktur, mudah dirawat, dan performa halaman lebih baik. Kalian dapat menulis aturan yang berlaku global, sekaligus menyesuaikan komponen tertentu tanpa mengubah isi kontennya.
Fungsi Dan Cara Kerja CSS
Browser membaca HTML untuk membentuk DOM, lalu menerapkan aturan CSS melalui selector (misalnya tag, class, atau id) yang “mencari” elemen target. Jika ada beberapa aturan yang bertabrakan, browser menentukan pemenangnya lewat specificity dan urutan penulisan. Properti juga dapat diwariskan (inheritance), contohnya font-family dari body ke elemen turunannya.
Penggunaan CSS dapat dilakukan dengan tiga cara: inline (langsung di atribut elemen), internal (tag <style> di <head>), dan eksternal (file .css terpisah). Untuk skala proyek nyata, eksternal lebih disarankan agar kode rapi dan mudah di-cache.
Contoh Kode CSS
Contoh penyematan eksternal di HTML:
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
Contoh internal di HTML:
<head>
<style>
body { font-family: system-ui, sans-serif; line-height: 1.6; }
</style>
</head>
Contoh file styles.css yang siap pakai:
/* styles.css */
:root { --primary: #0d6efd; }
body {
font-family: system-ui, sans-serif;
line-height: 1.6;
color: #222;
margin: 0;
}
.container {
max-width: 960px;
margin: auto;
padding: 16px;
}
.card {
border: 1px solid #ddd;
border-radius: 12px;
padding: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,.06);
transition: transform .2s ease;
}
.card:hover { transform: translateY(-2px); }
.button {
background: var(--primary);
color: #fff;
padding: 10px 16px;
border-radius: 8px;
text-decoration: none;
}
@media (max-width: 600px) {
.grid { display: grid; grid-template-columns: 1fr; }
}
Tabel ringkas selector yang sering dipakai:
| Selector | Contoh | Kegunaan |
|---|---|---|
| Elemen | p { ... } | Menargetkan semua tag tertentu |
| Class | .card { ... } | Menargetkan elemen dengan class tertentu |
| ID | #hero { ... } | Menargetkan elemen unik ber-ID |
| Turunan | .nav a { ... } | Menargetkan anak/cucu di dalam kontainer |
| Pseudo-class | a:hover { ... } | Keadaan khusus seperti hover/focus |
Tips cepat: simpan token warna di :root sebagai variabel CSS, pakai unit relatif (rem, em) agar responsif, dan manfaatkan media query untuk adaptasi layar mobile.
FAQ CSS
1) Apa Itu CSS?
CSS (Cascading Style Sheets) adalah bahasa untuk mengatur tampilan elemen HTML—mulai dari warna, ukuran huruf, jarak, layout, hingga animasi—agar website rapi dan konsisten.
2) Apa Perbedaan HTML Dan CSS?
HTML membangun struktur/konten halaman (judul, paragraf, gambar), sedangkan CSS mengatur presentasi atau gaya (warna, tipografi, tata letak). Keduanya saling melengkapi.
3) Bagaimana Cara Memakai CSS (inline, Internal, Eksternal)?
Inline: lewat atribut style pada elemen. Internal: tag <style> di <head>. Eksternal: file .css terpisah via <link>. Untuk proyek nyata, eksternal paling disarankan.
4) Apa Itu Selector, Property, Dan Value?
Selector memilih elemen target (mis. .card), property adalah aspek yang diatur (mis. color), dan value adalah nilainya (mis. #222). Contoh: .card { color: #222; }.
5) Apa Itu Specificity Dan Cascade?
Specificity menentukan aturan mana yang menang ketika terjadi konflik (id > class > elemen). Cascade adalah urutan penimpaan aturan; aturan terakhir dengan specificity sama akan diterapkan.
6) Apa Itu Box Model?
Semua elemen dianggap kotak yang terdiri dari content, padding, border, dan margin. Memahami box model membantu mengatur jarak dan layout dengan tepat.
7) Kapan Pakai Class Vs Id?
Class dipakai untuk banyak elemen yang berbagi gaya; id untuk elemen unik di halaman. Hindari menata dengan id berlebihan agar CSS tetap fleksibel.
8) Apa Bedanya em, rem, Dan px?
px bersifat absolut. em relatif terhadap font-size elemen induk, rem relatif terhadap root (html). Untuk skala responsif, rem umumnya lebih stabil daripada em.
9) Bagaimana Membuat Layout Modern: Flexbox Vs Grid?
Flexbox unggul untuk layout satu dimensi (baris/kolom tunggal). CSS Grid unggul untuk dua dimensi (baris dan kolom sekaligus). Sering kali keduanya dikombinasikan.
10) Apa Itu Pseudo_class Dan Pseudo_element?
Pseudo-class (mis. :hover, :focus) menerapkan gaya pada keadaan tertentu. Pseudo-element (mis. ::before, ::after) membuat elemen semu untuk dekorasi/konten tambahan.
11) Bagaimana Cara Menulis CSS Yang Rapi?
Gunakan konsistensi penamaan (mis. BEM), grouping logis per komponen, variabel CSS di :root, dan komentar seperlunya. Pisahkan utilitas global dari komponen.
12) Bagaimana Cara Membuat CSS Responsif?
Gunakan unit relatif (%, vw, rem), media query (mis. @media (max-width: 600px)), dan layout fleksibel (Flexbox/Grid). Uji di berbagai ukuran layar.
13) Apakah Perlu Framework CSS?
Tidak wajib. Framework (Bootstrap, Tailwind) mempercepat produksi. Untuk proyek kecil, CSS murni sudah cukup; untuk tim besar, framework membantu konsistensi.
14) Apa Itu Preprocessor (Sass/SCSS) Dan Kapan Dipakai?
Sass/SCSS menambah fitur seperti variabel, nesting, mixin. Dipakai saat proyek kompleks agar arsitektur CSS lebih modular dan mudah dirawat.
15) Di Mana Sebaiknya Meletakkan File CSS?
Sertakan di <head> menggunakan <link> agar gaya dimuat sedini mungkin. Aktifkan caching/CDN untuk performa.
16) Bagaimana Mengoptimasi Performa CSS?
Minify file, gabungkan stylesheet seperlunya, hindari selector terlalu kompleks, gunakan content-visibility/will-change secara hati‑hati, dan hapus CSS yang tidak terpakai.
17) Apakah CSS Case Sensitive?
Nama property dan selector CSS umumnya tidak peka huruf besar/kecil, tetapi nilai tertentu (seperti URL, string, atau nama font) bisa peka konteks.
18) Bagaimana Cara Debug CSS?
Gunakan DevTools (Inspect) untuk melihat aturan yang diterapkan, urutan cascade, dan ukuran box model. Aktifkan outline/border sementara untuk pelacakan layout.
Kesimpulan
CSS adalah kunci membuat antarmuka web yang indah dan konsisten. Setelah memahami “apa itu CSS” dan melihat contoh kode CSS di atas, kalian sudah punya pondasi untuk membangun layout, warna, tipografi, dan responsivitas dengan rapi. Sekian artikel dari kodelyly.com, semoga bermanfaat dan selamat bereksperimen di proyek kalian!