Selector, Property, dan Value

Setiap aturan style CSS dibagi menjadi 3 bagian: selector, property dan value. Syntax-nya (aturan penulisan kodenya) sebagai berikut:

selector {property: value}

Property dan value diletakkan di dalam tanda kurung kurawal ( {} ) dan selector berada sebelum tanda kurung kurawal, selain itu antara property dan value dipisahkan oleh tanda titik dua ( : ). Sebagai contoh, kita mendefinisikan paragraf HTML, yang ditandai dengan tag <p>, dengan value biru (blue) pada property warna (color) sebagai berikut:

p {color: blue}

Selector pada CSS sama dengan tag atau elemen pada HTML (seperti: <h1>, <p>, <tr>, dll). Satu aturan CSS minimal terdiri atas tiga bagian:

  • Selector, dalam contoh diatas p, memberitahukan browser, tag (elemen) HTML yang menggunakan style CSS.
  • Property, dalam contoh diatas color, dalam HTML disebut sebagai atribut. Biasanya merupakan ukuran kualitas suatu elemen seperti height, font-style, color, dll.
  • Value dari property, dalam contoh diatas blue. Ini merupakan nilai yang menyatakan perubahan yang kita lakukan terhadap tampilan dari elemen seperti 45 pixel, Times Roman atau yellow.

Beberapa value memiliki lebih dari satu suku kata sebagai contoh Times Roman, untuk menulisnya dalam kode CSS kita perlu menambahkan kutip ganda ( ” ) diantara value tersebut. Contoh:

p {font-family:”Times Roman”}

Contoh diatas merupakan contoh CSS yang sangat sederhana. Kita bisa juga mengelompokkan berbagai macam property dalam satu aturan dan memisahkan tiap property dengan titik koma ( ; ), lihat contoh berikut:

p {
    color: blue;
    text-align: right;
    font-family: courier;
}

Seperti HTML, kode CSS juga bisa kita tulis sesuai keinginan, tidak harus baris per baris seperti contoh diatas. Lihat contoh berikut yang memberikan hasil sama dengan contoh sebelumnya:

p { color: blue;
    text-align: right; font-family: courier;}

Selain berbagai macam property bisa dikelompokkan dalam satu aturan, Kita juga dapat menggunakan property yang sama pada lebih dari satu selector dengan masing-masing selector dipisahkan dengan koma ( , ). Contoh:

h1, h2, p {
    color: blue;
}

Contoh-contoh sederhana diatas hanya menjelaskan bagaimana menuliskan suatu kode CSS sedangkan bagaimana penggunaannya dalam kode HTML belum dijelaskan.

Ditulis dalam CSS, web. Tag: , . Leave a Comment »

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: