Dalam
bahasa pemrograman dikenal dengan istilah Syntax atau suatu kalimat CSS terdiri
dari beberapa set peraturan diantaranya: 1 selector, 1 property, 1 value.
Untuk menulis Format kalimat CSS sebagai
berikut:
selector {property: value}
Selector atau select berguna untuk mengatur bagian-bagian
yang anda suka. Sedangkan Property untuk menunjukkan, bagian (properti) dari
selector yang hendak diatur. Yang terakhir yaitu Value yang merupakan nilai
dari pengaturannya.
Contoh Syntax:
h1 {color: red}
dari contoh di atas menunjukkan
h1:
merupakan ‘selector’
Color:
adalah ‘property’
Red:
merupakan ‘value’
Artinya
adalah kita mengatur color dari h1 ke warna red
Pengelompokan Selectors
Anda dapat menulis satu kode CSS
untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau
mengatur agar tag h1, h2 dan h3semua
menggunakan warna merah,
maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan
oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties
gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3
{color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2
dan h3 di atur agar menggunakan warnamerah, dengan type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode CSS
menggunakan beberapa baris dimana pengaturan property dan values nya di indent.
Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
color:red;
font-family:arial;
font-size:150%;
}
Sekarang anda sudah mengerti aturan dasar
penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda
mengaplikasikan kode CSS ke halaman website.
CSS Comment
Kadang kala, ada baiknya anda menuliskan
komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan
penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /*
dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri
anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
