Cascading Style Sheet (CSS) adalah bahasa stylesheet yang digunakan untuk mendesain tampilan visual halaman web. Dengan menggunakan CSS, kita dapat mengendalikan format, layout, dan penampilan visual elemen-elemen HTML pada halaman web. CSS memisahkan antara konten (HTML) dengan tampilan (CSS), sehingga memungkinkan pengguna untuk dengan mudah mengubah tampilan halaman web tanpa harus mengubah struktur HTML-nya.
Selektor
Selektor adalah elemen pada CSS yang digunakan untuk memilih elemen HTML yang akan diberikan gaya. Selektor dapat berupa nama elemen HTML, kelas, ID, atau pseudo-class. Misalnya, jika kita ingin memberikan gaya pada semua elemen paragraf, kita dapat menggunakan selektor “p”.
Properti dan Nilai
Properti adalah atribut pada CSS yang digunakan untuk mengubah tampilan elemen HTML. Contoh properti pada CSS antara lain warna teks, ukuran font, margin, dan padding. Setiap properti memiliki nilai, yang berfungsi sebagai konfigurasi untuk properti tersebut. Misalnya, properti “background-color” memiliki nilai seperti “red” atau “rgb(255, 0, 0)”.
- Contoh penggunaan properti dan nilai:
p { color: blue; }
Kaskade dan Warisan
Prinsip kaskade dan warisan pada CSS menjelaskan bagaimana gaya diterapkan pada elemen yang memiliki selektor yang sama atau terkait. Konsep kaskade berarti gaya-gaya yang diberikan ke elemen dapat berasal dari beberapa sumber, seperti gaya internal, gaya eksternal, atau gaya inline. Jika terdapat konflik antara gaya-gaya tersebut, maka aturan warisan akan digunakan untuk menentukan gaya mana yang akan diterapkan.
Box Model
Box model adalah konsep yang digunakan untuk menggambarkan layout elemen pada halaman web. Setiap elemen HTML dapat dianggap sebagai kotak (box) yang terdiri dari empat bagian: margin, border, padding, dan konten. Margin adalah area di luar kotak, border adalah garis di sekitar kotak, padding adalah ruang antara konten dan border, dan konten adalah isi dari kotak tersebut.
| Properti | Deskripsi |
|---|---|
| margin | Menentukan jarak di luar kotak. |
| border | Menentukan gaya, ketebalan, dan warna garis di sekitar kotak. |
| padding | Menentukan jarak antara konten dan border. |
| width | Menentukan lebar kotak. |
| height | Menentukan tinggi kotak. |
Posisi dan Atribut
Pada CSS, terdapat beberapa properti yang digunakan untuk mengatur posisi elemen pada halaman web. Properti-position, float, clear, dan z-index digunakan untuk mengendalikan bagaimana elemen saling berinteraksi dan berada dalam tata letak halaman.
Responsif dan Media Query
Responsif merupakan kemampuan tampilan halaman web untuk menyesuaikan diri dengan berbagai perangkat dan ukuran layar yang berbeda. Media query adalah fitur pada CSS yang digunakan untuk mengubah tampilan halaman berdasarkan kondisi tertentu, seperti ukuran viewport dan orientasi perangkat.
Pseudo-class dan Pseudo-element
Pseudo-class dan pseudo-element dalam CSS digunakan untuk memberikan gaya pada elemen-elemen dengan keadaan tertentu atau bagian-bagian spesifik dari elemen. Pseudo-class menunjukkan keadaan elemen, seperti link yang belum dikunjungi (:link) atau tombol yang sedang dihover (:hover). Pseudo-element, di sisi lain, digunakan untuk memodifikasi bagian spesifik dari elemen, seperti menambahkan baris terakhir pada paragraf (:last-child).
Dengan penjelasan di atas, diharapkan Anda memiliki pemahaman yang lebih baik tentang Cascading Style Sheet (CSS) dan bagaimana menggunakan CSS untuk merancang tampilan halaman web yang menarik.