Syntax css umumnya terdiri dari beberapa element yang kita sebut selektor dan deklarasi.
h1 { color: white; text-align: center;}
Keterangan :
H1 : Selektor
Color : Property
Text-align : Property
White : Value
Center : Value- Selektor menunjuk ke elemen HTML yang ingin kita ubah tampilannya.
- Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh tanda titik koma.
- Setiap deklarasi menyertakan nama properti CSS dan nilai, dipisahkan oleh titik dua.
- Deklarasi CSS selalu diakhiri dengan tanda titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.
Contoh Syntax CSS
Contoh ini kita akan membahas dua penyesuaian gaya / tampilan pada elemen.
- Elemen paragraf (<p>) kita ubah menjadi warna merah dan text berada di tengah
- Elemen heading 1 (<h1>) kita ubah menjadi warna putih dan jenis fontnya verdana
<!DOCTYPE html> <html> <head> <!-- ini adalah baris kode css --> <style> body{ background-color: lightblue; } h1 { color: white; font-family: verdana;} p {color: red; text-align: center;} </style> <!-- ini adalah akhir baris kode css --> </head> <body> <h1>Heading 1</h1> <p>Paragraf yang telah di ubah stylenya, huruf warna merah dan posisi text di tengah.</p> </body> </html>
Komen Pada Syntax CSS
Komen pada syntax css digunakan untuk memberikan keterangan pada baris kode, untuk memudahkan kita melacak fungsi tersebut.
Komen ini tidak akan terbaca oleh browser.
- Komen di awali oleh tanda /* dan di akhiri */
p {
color: red;
/* Komen satu baris */
text-align: center;
}
/* komen
dapat berupa
beberapa baris */ <!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: lightblue;
}
/* ini komen, keterangan untuk heading*/
h1 { color: white; text-align: center;
}
p {font-family: verdana; font-size: 20px;}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraf yang telah di ubah stylenya.</p>
</body>
</html>Properti dan value yang ada pada css umumnya akan disuggest secara otomatis pada editor yang anda gunakan.
