Mulai Belajar CSS: Syntax

Syntax CSS terbagi jadi 3 bagian, yaitu selector, property, dan value

selector {property:value}

Contoh penggunaannya

h1{color:blue}

atau dengan multi-property

h1{color:blue; text-align:center: font-family:"sans serif";}

supaya lebih mudah dibaca

h1{
color:blue;
text-align:center;
font-family:"sans serif";
}

Note :

• Property dan value dibuka dan ditutup dengan kurung-kurawal “{}” dan dipisahkan dengan titik-dua ”:“
• Apabila dalam satu selector terdapat lebih dari satu property, maka dipisahkan dengan titik-koma “;“

Selector dapat berupa tag html/xhtml, id, atau class. Contoh di atas menggunakan selector yang berupa tag HTML.

Selector dengan menggunakan id

id digunakan untuk memberi style hanya untuk 1 elemen yang unik. Berarti id hanya dapat digunakan sekali pada tiap halaman web (walaupun pada kenyataannya tidak seperti itu). Tetapi apabila digunakan lebih dari sekali, maka penggunaan seperti ini menyalahi aturan dasar dari HTML/XHTML dan beberapa browser tidak bisa membaca id yang digunakan lebih dari sekali.

Untuk mendeklarasikan id pada CSS, diawali dengan tanda pagar “#“. Dan untuk menempatkannya pada halaman web, menggukaan property id=”nama-id” pada elemen yang akan digunakan.

#main{
color:blue;
text-align:center;
font-family:"sans serif";
}

dan pada htmlnya

ini text dalam elemen
 dengan id "main"

Selector menggunakan class
class dapat digunakan lebih dari sekali, cara penulisannya diawali dengan tanda titik “.” Dan untuk menempatkannya pada halaman web, menggukaan property id=”nama-id” pada elemen yang akan digunakan.

#kanan{
color:blue;
text-align:center;
font-family:"sans serif";
}

dan pada htmlnya

ini text dalam elemen
 dengan class "kanan"

Memberi komentar pada CSS
Biasanya komentar dipakai untuk mempermudah nyari bagian dari CSS untuk di-edit lagi. Komentar nggak diproses oleh browser, jadi nya ga akan tampil di halaman web. Untuk mendeklarasikan diawali dengan tanda “/*” dan ditutup dengan “*/”. Contohnya:

/* ini komentar */
p{
text-align:center;
/* Ini komentar juga */
color:black;
font-family:arial
}

*Setelah ini, lanjut lagi belajar cara masukin CSS ke halaman web (HTML/XHTML)

Tulisan Lainnya:

1. Checklist untuk Konsistensi
2. Google Syntax Highlighter
3. Engkau adalah jiwa yang dilahirkan mulia