Struktur Dasar CSS
Setelah mempelajari tentang penulisan css di HTML pada materi sebelumnya, kita harus memahami struktur dasarnya terlebih dahulu. Struktur dasar yang dimaksud disini adalah komponen-komponen yang ada pada sebuah kode CSS yang akan kita tulis. Sintaks atau cara penulisan kode merupakan kunci utama dalam memastikan bahwa gaya tampilan yang kita inginkan dapat diterapkan dengan tepat pada website.
CSS memiliki struktur dasar yang terdiri dari:
- Selector
- Blok Deklarasi
- Properti dan Nilai
Untuk memahami ketiga komponen tersebut maka mari kita bahas satu-persatu mulai dari selector.
1. Selector
Selector menentukan elemen mana di HTML yang ingin Anda gayakan. Misalnya, jika Anda ingin mengubah tampilan semua teks dalam elemen <p>, maka p adalah selector Anda.
p {
/* Blok deklarasi akan ada di sini */
}
2. Blok Deklarasi
Setelah menentukan selector, kita gunakan tanda kurung { } untuk mendeklarasikan gaya yang ingin kita terapkan. Area ini disebut blok deklarasi. Dalam blok deklarasi inilah kita akan menentukan berbagai properti dan nilainya.
3. Properti dan Nilai
Di dalam blok deklarasi, kita tentukan gaya spesifik dengan menggunakan pasangan properti dan nilai.
p {
color: blue;
font-size: 16px;
}
Penjelasan kode:
- Dalam contoh di atas,
coloradalah properti yang mengacu pada warna teks, danblueadalah nilainya. Artinya, semua elemen <p> di html akan berwarna biru. - Selain itu pada baris berikutnya, font-size juga merupakan properti yang mengatur ukuran font dengan nilai 16px. Artinya semua elemen <p> akan berukuran 16 pixels.
Jadi dalam 1 blok deklarasi kita bisa membuat banyak properti dan nilai.
Bagaimana penulisan CSS untuk elemen dan gaya yang berbeda-beda?
Dalam sebuah web tentunya kita memiliki banyak elemen dan pastinya gaya yang diterapkan berbeda-beda. Pada dasarnya, penulisan css untuk setiap elemen tersebut ditulis tanpa ada pemisah baik itu spasi, koma, titik atau enter (line break).
Contohnya:
p{color: blue;font-size: 16px;}h1{font-size: 32px;}h2{font-size: 28px;}
Namun kita boleh menggunakan spasi maupun enter (line break) jika menginginkan kode css yang lebih mudah dibaca.
Contohnya:
p{
color: blue;
font-size: 16px;
}
h1{
font-size: 32px;
}
h2{
font-size: 28px;
}
Spasi dan enter tidak akan berpengaruh pada css kecuali pada penulisan combinator yang akan kita bahas pada materi tersendiri.
Kesimpulan
Memahami struktur dasar CSS adalah langkah pertama untuk menguasai seni perancangan web. Dengan memahami selector, blok deklarasi, serta properti dan nilainya, Anda telah meletakkan fondasi yang kokoh untuk mendalami CSS lebih jauh. Selamat belajar!
Apa yang harus dipelajari selanjutnya?
Setelah belajar struktur dasar css maka kita sudah memahami bagaimana menyusun dan membuat sebuah css. Selanjutnya kita bisa melanjutkan untuk belajar:
Mari kita lanjutkan!
