Syntax CSS - Belajar CSS #3

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 / Declaration
Di 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 Selector
Adakalanya 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...