Kode CSS

  1. › 
  2. Kode CSS

Format (pola) penulisan kode CSS

Materi ini juga dijelaskan dihalaman Penulisan CSS

selector { properti: value; }

Apa itu selector, properti dan value ?

Contoh kode :

Contoh kode HTML CSS
HTML :
<body>
<h1> Title </h1>
<div> Konten </div>
<p> Paragraf </p>
<span> teks span </span>
</body>
CSS :
<style>
h1 { color: black;}
div { padding: 10px;}
p { font-size: 14px;}
span { color: red;}
</style>

Berdasarkan contoh kode diatas, berikut ini penjelasannya :
1. Dalam kolom kode HTML h1, div, p, dan span disebut sebagai tag atau nama elemen.
2. Sedangkan didalam kolom kode CSS, penyebutan tag atau nama elemen ini dinamakan sebagai selector.

Dinamakan selector karena berfungsi sebagai penyeleksi elemen, dengan cara menyebutkan bagian penting dari elemen tersebut tepat sebelum tanda kurung kurawal seperti ini :
h1{..} div{..} p{..} span{..}.

Setelah mengetahui apa yang dimaksud dengan selector, selanjutnya kita bahas unsur atau objek yang berada didalam tanda kurung kurawal ({})

Properti dan value dalam kode CSS

Dibawah ini tertera contoh kode CSS yang sama dengan sebelumnya dan disebelahnya menerangkan pola penulisannya.

CSS :
<style>
h1 { color: black;}
div { padding: 10px;}
p { font-size: 14px;}
span { color: red;}
</style>
POLA CSS :
<style>
selector { properti: value;}
selector { properti: value;}
selector { properti: value;}
selector { properti: value;}
</style>

Penjelasan :

Properti adalah suatu unsur yang menjadi bagian dari elemen.
Value adalah isi dari properti yang menjelaskan detail dari properti tersebut.

Misal :
Pada kode h1 {color:black}, color bertugas mendeklarasikan properti (warna teks) yang merupakan bagian dari elemen h1 dengan detail black yaitu warna hitam.
Sehingga pola penulisannya {properti: value;}, dan ini berlaku pada seluruh penulisan kode CSS.

Penjelasan tambahan untuk materi ini lihat dihalaman Penulisan CSS

Komentar

Posting Komentar