Kembali lagi pada serial belajar CSS. Mari kita selangkah lebih dalam lagi mempelajarinya. Ini adalah yang ketiga setelah serial Belajar CSS #1 - Penganalan CSS dan Belajar CSS #2 - Berbagai Metode Penggunaan CSS. Kali ini kita akan membahas aturan penulisan kode CSS.
CSS Syntax
Penulisan CSS menggunakan dua bagian utama yakni selector dan declaration. Selector adalah elemen HTML yang ingin Anda atur style nya. Sedangkan Declaration terdiri dari dua bagian yakni property dan value. Properti adalah attribut gaya dan value adalah nilai pengaturnya.
selector {property: value} selector: h1, property: font-size, value: 10px.
Berarti: Ukuran huruf dari bagian h1 adalah 10 px
- Property dan value dipisahkan dengan titik dua :
- Pengaturan sifat atau declaration terdapat di dalam kurung keriting {}
- Jika satu properti memiliki beberapa nilai (value) maka dipisahkan dengan koma ,
selector {property: value1, value2, value3} - Jika satu isian value menggunakan lebih dari satu kata, maka apitlah dengan tanda petik ""
Contoh:
body {font-family: "Trebuchet MS", Georgia, Arial, serif;}
Perhatikan kode di atas!
- Selector body memiliki beberapa pengaturan sifat yakni
background dan
font-family.
- Trebuchet MS terdiri dari dua kata, oleh karena itu diapit tanda petik
Penggunaan Banyak Sifat / DeclarationDi atas telah jelas diterangkan cara penulisan CSS. Sekarang bagaimana jika satu selector, memiliki banyak sifat. Jika menggunakan beberapa deklarasi, maka akhiri deklarasi dengan titik koma.
Satu sifat:
selector {property: value;}
Banyak sifat:
selector {property1: value; property2: value; property3: value;}
atau jika ingin lebih mudah dibaca, ditulis:
selector {
property1: value;
property2: value;
property3: value;
}
Contoh:
body {
background: #000000;
font-family: “Trebuchet MS”, Georgia, Arial, serif;
}
Penggabungan SelectorAdakalanya beberapa selector ternyata memiliki property dan value yang sma persis. Misalkan sebagai berikut:
h1 {font-size: 8px; color:#cccccc;}
dan
h2 {font-size: 8px; color:#cccccc;}
dan
h3 {font-size: 8px; color:#cccccc;}
dan
h4 {font-size: 8px; color:#cccccc;}
dan
h5 {font-size: 8px; color:#cccccc;}
Nah karena kode tersebut terlalu panjang, kita bisa menyingkatnya. Pisahkan antara selector dengan koma.
h1, h2, h3, h4, h5 {font-size: 8px; color:#cccccc;}
Comments Tag
Comments tag diberikan sebagai informasi untuk CSS tertentu. Ketika CSS sudah sangat panjang, maka informasi ini dibutuhkan agar css tertentu lebih mudah ditemukan. Cara penulisannya adalah dibuka dengan /* dan ditutup dengan */
Contoh:
/* Ini adalah pengaturan header*/
#header-wrapper {
width: 120px;
height: 90px;
}
Semoga sedikit pembelajaran lagi tentang CSS ini bermanfaat untuk Anda. Selamat pagi...
Read More......
