CSS(Cascading Style Sheets) adalah komponen dasar pengembangan web yang memainkan peran penting dalam mengontrol tampilan visual elemen HTML di situs web Anda. Ini memberikan seperangkat aturan dan properti yang kuat yang menentukan bagaimana elemen ditampilkan, diformat, dan diposisikan, memungkinkan Anda menyesuaikan tampilan dan nuansa halaman web Anda.
Mari kita mulai dengan memahami konsep penyeleksi
Pemilih digunakan untuk menargetkan elemen HTML tertentu untuk penataan. Salah satu pemilih yang paling dasar adalah pemilih elemen, yang memilih semua elemen HTML tertentu.
Misalnya, aturan CSS berikut menargetkan semua paragraf dalam dokumen:
p {
color: blue;
}
Dalam contoh ini, p pemilih memilih semua <p> elemen dan menyetel warna teksnya menjadi biru.
Pemilih umum lainnya adalah pemilih kelas
Kelas digunakan untuk mengelompokkan elemen dengan karakteristik yang mirip. Dengan menetapkan kelas ke elemen HTML, Anda dapat menargetkan dan menatanya secara kolektif.
Berikut contohnya:
.blue-text {
color: blue;
}
Dalam hal ini, .blue-text pemilih menargetkan semua elemen dengan kelas blue-text dan menerapkan warna biru pada teksnya.
Selain itu, ID pemilih memungkinkan Anda menargetkan elemen tertentu dengan pengidentifikasi uniknya. ID biasanya ditugaskan ke elemen individual pada halaman.
Berikut contohnya:
#header {
background-color: gray;
}
Dalam contoh ini, #header pemilih memilih elemen dengan ID header dan menerapkan warna latar belakang abu-abu.
Pindah ke sintaks CSS, setiap aturan CSS terdiri dari pemilih dan blok deklarasi
Blok deklarasi diapit oleh kurung kurawal {} dan berisi satu atau lebih deklarasi. Deklarasi terdiri dari properti dan nilainya yang sesuai.
Berikut contohnya:
h1 {
font-size: 24px;
color: #333;
}
Dalam cuplikan kode ini, h1 pemilih memilih semua <h1> elemen dan menyetel ukuran font menjadi 24 piksel dan warna teks menjadi abu-abu tua(#333).
Sepanjang seri ini, kami akan mengeksplorasi dan menjelaskan berbagai properti CSS, pemilih, dan kombinasinya, memungkinkan Anda membuat situs web yang menarik secara visual dan terstruktur dengan baik. Memahami CSS dan sintaks dasarnya akan memberi Anda dasar untuk mengendalikan aspek gaya halaman web Anda, memastikan pengalaman pengguna yang unik dan personal. Mari selami dan temukan kemungkinan tak terbatas dari CSS!