CSS (Cascading Style Sheets) adalah bahasa gaya yang digunakan untuk mendesain halaman web. Ini memungkinkan Anda memisahkan konten halaman dari presentasinya, membuatnya lebih mudah untuk bekerja dengan tata letak dan desain.
CSS terdiri dari seperangkat aturan, yang masing-masing menentukan bagaimana elemen tertentu pada halaman web harus ditata. Aturannya termasuk memilih elemen menggunakan penyeleksi dan menyetel properti pada elemen tersebut. Mari kita lihat komponen utama CSS – aturan, pemilih, dan properti.
Aturan
Aturan CSS terdiri dari pemilih dan blok properti. Aturan memberi tahu browser elemen mana dari halaman web yang akan ditata dan bagaimana mereka harus ditata. Setiap aturan dimulai dengan pemilih yang memilih elemen dan diakhiri dengan blok properti yang berlaku untuk elemen yang dipilih.
Berikut adalah contoh aturan sederhana:
p{
color: blue;
font-size: 16px;
}
Di sini `p` adalah pemilih yang memilih semua paragraf di halaman. Di dalam blok properti, gaya untuk paragraf ditetapkan: warna teks biru dan ukuran font 16 piksel.
Pemilih
Pemilih memungkinkan Anda memilih satu atau beberapa elemen pada halaman web untuk menerapkan gaya tertentu. Pemilih bisa sangat sederhana atau lebih kompleks dan memungkinkan Anda memilih elemen berdasarkan jenis, kelas, ID, atribut, dan bahkan lokasinya di halaman.
Contoh pemilih sederhana:
- `p` – memilih semua paragraf.
- `.header` – memilih semua elemen dengan kelas “header”.
- `#logo` – memilih elemen dengan id “logo”.
Contoh penyeleksi yang lebih kompleks:
- `ul li` – memilih semua elemen daftar `li` yang merupakan turunan dari elemen `ul`.
- `input` – memilih semua kolom teks pada halaman.
Properti
Properti menentukan tampilan elemen yang dipilih menggunakan pemilih. Setiap properti memiliki nilai yang menentukan tampilan elemen.
Contoh properti:
- `color` – menentukan warna teks elemen.
- `font-size` – menyetel ukuran font.
- `background-color` – menyetel warna latar belakang elemen.
- `border` – menentukan gaya, ketebalan, dan warna batas elemen.
Berikut adalah contoh penggunaan properti:
h1 {
color: red;
font-size: 24px;
background-color: yellow;
border: 1px solid black;
}
Aturan ini memilih semua judul h1 dan menyetel warna teksnya menjadi merah, ukuran font 24px, latar belakang kuning, dan batas hitam setebal 1px.
Kombinator
Combinator di CSS memungkinkan Anda menggabungkan pemilih dan membuat aturan yang lebih spesifik. Berikut adalah beberapa contoh kombinator:
- `div p` – memilih semua elemen `p` yang merupakan turunan dari elemen `div`.
- `.menu-item > a` – memilih semua elemen `a` yang merupakan turunan langsung dari elemen dengan kelas `.menu-item`.
- `h2 + p` – memilih semua elemen `p` yang muncul langsung setelah elemen `h2`.
Menggunakan kombinator memungkinkan Anda menyempurnakan cara penerapan gaya ke elemen pada halaman.
Pseudo-classes dan pseudo-elements
Kelas semu dan elemen semu memungkinkan Anda untuk memilih elemen yang berada di status tertentu atau memiliki bagian tertentu. Mereka ditentukan setelah pemilih utama dan dilambangkan dengan titik dua.
Contoh kelas semu:
- `:hover` – Menerapkan gaya saat kursor diarahkan ke suatu elemen.
- `:active` – menerapkan gaya saat elemen aktif (mengeklik tombol, misalnya).
- `:focus` – menerapkan gaya saat elemen memiliki fokus (misalnya, kolom input saat diklik).
Contoh elemen semu:
- `::before` – menambahkan konten sebelum konten dari elemen yang dipilih.
- `::after` – menambahkan konten setelah konten dari elemen yang dipilih.
- `::first-line` – menerapkan gaya ke baris pertama teks dalam elemen.
- `::first-letter` – menerapkan gaya ke huruf pertama teks dalam elemen.
Impor file CSS
Untuk membuat kode Anda lebih terstruktur dan lebih mudah dipelihara, CSS memungkinkan Anda mengimpor gaya dari file lain. Ini dicapai dengan perintah `@import`, yang dapat ditempatkan di bagian atas file CSS.
Dengan cara ini, Anda dapat membagi gaya menjadi file yang berbeda, yang akan membuatnya lebih mudah untuk diedit dan mengurangi ukuran masing-masing file.
Cascading dan prioritas
CSS didasarkan pada prinsip cascading, yang berarti bahwa gaya dapat ditentukan di berbagai tempat dan sumber, dan browser akan memutuskan gaya mana yang akan diterapkan berdasarkan prioritas. Cascading meliputi:
- Presedensi Pemilih: Browser menghargai kekhususan pemilih. Semakin spesifik pemilih, semakin tinggi prioritasnya.
- Urutan Gaya: Jika dua aturan memiliki kekhususan yang sama, aturan terakhir akan diterapkan ke elemen.
- Kepentingan Gaya: Anda dapat menyetel pentingnya gaya menggunakan `!important`. Hal ini membuat gaya diutamakan.
p{
color: red !important;
}
Penting untuk menggunakan `!important` dengan hati-hati untuk menghindari masalah pemeliharaan kode di masa mendatang.
Kueri media
CSS memungkinkan gaya untuk beradaptasi berdasarkan setelan perangkat seperti lebar dan resolusi layar. Kueri media memungkinkan Anda membuat desain responsif yang terlihat bagus di berbagai perangkat, dari ponsel hingga desktop.
Contoh kueri media:
@media screen and (max-width: 768px) {
/* styles for devices with screen widths up to 768px */
body {
font-size: 14px;
}
}
Dalam contoh ini, gaya akan diterapkan ke elemen laman bila lebar layar tidak melebihi 768 piksel.
CSS adalah alat penataan web yang kuat dan dasar-dasar ini akan membantu Anda mulai menggunakannya untuk membuat desain yang cantik dan fungsional. Latihan dan pengalaman akan membantu Anda meningkatkan keterampilan dan menjadi pengembang front-end yang berpengalaman.
