Membangun Website dengan CSS (Bagian 3)

May 23, 2013
Sebelumnya: Membangun Website dengan CSS (Bagian 2)

Kali ini aku akan membahas tentang sintaks pada CSS yang dibagi menjadi 3 bagian, yaitu: selektor, properti, dan nilai. Selektor adalah elemen HTML yang akan diubahsesuaikan gayanya. Contoh selektor antara lain: body, h1 hingga h6, a, ul, li, dan sebagainya. Sedangkan properti adalah atribut dari selektor yang akan diubah sesuaikan, misalnya: tinggi, lebar, warna latar, dan lain-lain. Begitu juga dengan nilai; nilai adalah isi dari properti. Contoh dari nilai adalah: satuan px untuk tinggi dan lebar; kode heksadesimal untuk warna RGB, dan lain-lain.


Selektor

Ada 3 macam jenis selektor, yaitu: selektor yang berasal dari elemen HTML, selektor yang berasal dari class atau id, dan selektor yang berasal dari pseudo-class. Selektor yang berasal dari elemen HTML, misalnya: body, h1 hingga h6, a, ul, dan sebagainya. Selektor yang berasal dari class biasanya dimulai dengan titik (.) dan selektor yang berasal dari id dimulai dengan pagar (#), misalnya: .button, .clear, #wrapper, #sidebar, dan sebagainya. Sedangkan selektor yang berasal dari pseudo-class dimulai dengan titik dua (:), misalnya: :hover, :visited, dan sebagainya.

Boleh menggabungkan dua atau lebih dari dua selektor agar lebih spesifik target yang akan di-styling, contohnya: #wrapper a:hover { }. Selain itu juga bisa menggabungkan dua selektor atau lebih yang memiliki properti dan nilai yang sama, contohnya: #satu, #dua, #tiga { }.

Properti & Nilai

Banyak macam properti pada CSS. Setiap properti memiliki macam nilai yang berbeda. Misalkan properti width dan display. Properti width memiliki nilai dengan besaran px, %, dan em. Sedangkan properti display memiliki nilai none, block, inline, dan lainnya. Selain itu juga terdapat properti yang khusus digunakan dan berfungsi pada browser tertentu saja. Misalkan prefiks -webkit- bekerja di Safari dan Chrome, -moz- bekerja di Mozzila Firefox, dan -o- bekerja di Opera. Tidak semua properti bisa didukung oleh semua browser, oleh karena itu kita harus bijak dalam menggunakan properti yang disediakan. Untuk lebih jelasnya kamu bisa mengenal banyak properti dan nilai CSS di website W3Schools di bagian yang membahas CSS dan CSS3.

Selanjutnya: Membangun Website dengan CSS (Bagian 4)

Artikel Terkait

Previous
Next Post »