CSS Warna

PENULISAN KODE CSS

Sebagai contoh, memberi warna elemen HTML menggunakan CSS :

<p> Teks paragraf</p>

<style>
   p {color: blue;}
</style>

Hasil :

Teks paragraf

Urutan penulisan Kode CSS.

Perhatikan penulisan CSS dalam tag <style> diatas yang penjelasannya adalah :

p { color : blue; }

Penjelasan istilah :

p adalah tag atau nama elemen yang diseleksi untuk diberikan style.
{ } tanda kurung kurawal adalah pembatas dimana style dari elemen tersebut ditempatkan.

Contoh lain misal tag <span> maka penulisan CSS nya:

<span> Teks span</span>

<style>
   span {color: green;}
</style>

Hasil :

Teks span

Pada contoh diatas sama seperti sebelumnya, tag <span> merupakan elemen yang diseleksi untuk diberikan gaya.

Nama tag elemen yang diseleksi tersebut dinamakan sebagai selektor (selector).
Maka selector adalah istilah untuk teks atau karakter yang berada SEBELUM kurung kurawal { }.
Dan fungsinya untuk menyeleksi elemen yang diwakili oleh selector tersebut.

Setelah memahami selector, maka jika dituliskan dalam kode menjadi seperti ini :

selector { color : blue; }

{property : value;}

Selanjutnya mengenal istilah untuk objek (teks) yang berada didalam kurung { }.

1. Teks yang berada SETELAH kurung pembuka ({ ) dan dibatasi oleh titik dua (:) atau colon ini disebut property.
2. Teks yang berada SETELAH tanda titik 2 : (colon) disebut value atau nilai / isi.

selector { property : value; }

Contoh :

<span> Teks span</span>

<style>
   span {
   color: green;
   font-size: 14px;
   font-weight: bold;
   background: yellow;
   }
</style>

Hasil :

Teks span

Jika kode CSS diatas dituliskan dalam istilah menjadi seperti ini :

<style>
    /*-- Perhatian, kode ini hanya untuk memahami
    istilah-istilah dalam kode CSS --*/
   selector {
   property: value;
   property: value;
   property: value;
   property: value;
   }
</style>

Tujuan memahami istilah-istilah tersebut adalah untuk mempermudah penjelasan apabila pada kondisi tertentu dibutuhkan diskusi, misal terkait selector A, properti B valuenya apa... dsb

Baca juga Pola penulisan kode CSS