Syntax CSS
Syntax / kalimat CSS adalah aturan atau kaidah penulisan text CSS.
Format Penulisan CSS
Syntax / kalimat CSS terdiri dari beberapa aturan yaitu: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:
selector { property: value }
Selector itu untuk menunjukkan
bagian mana yang hendak diatur / diformat. Property
untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh :
<html><head><title>Contoh Selector CSS</title><style type=”text/css”>h1 { color: red }</style></head > <body><h1>Text Ini Berwarna Merah</h1> </body></html>
Contoh di atas menunjukkan
- Selector: h1
- Property: color
- Value: red
Jika diterjemahkan ke kalimat bahasa Indonesia maksudnya adalah: Mengatur warna dari h1 ke warna merah (red).
Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk
berbagai macam selector dengan cara memisahkannya dengan menggunakan
koma. Misalkan anda mau mengatur agar tag h1, h2 sampai h6 semua
menggunakan warna merah, maka kode
CSS nya menjadi:
h1,h2,h3,h4,h5,h6 { color: red }
Perhatikan penulisan h1,h2,h3,h4,h5,h6 dipisahkan oleh koma.
Contoh :
<html><head><title>Contoh Selector CSS</title><style type=”text/css”>h1,h2,h3,h4,h5,h6{ color: red }</style></head ><body><h1>Text Ini Berwarna Merah</h1><h2>Text Ini Berwarna Merah</h2> <h3>Text Ini Berwarna Merah</h3> <h4>Text Ini Berwarna Merah</h4> </body></html>
Jika diterjemahkan ke kalimat bahasa Indonesia maksudnya adalah: Mengatur warna dari h1 sampai h6 ke warna merah (red).
Penggunaan Banyak Properties
Untuk menambahkan property lain dalam suatu selector, anda bisa menggunakan pemisah titik koma( ; ).
Contoh :
<html><head><title>Contoh Selector CSS</title><style type=”text/css”>h1,h2,h3,h4,h5,h6 {color: red;font-family:arial; font-size:20px;}</style></head ><body><h1>Text Ini Berwarna Merah Font Arial Ukuran 20px</h1><h2> Text Ini Berwarna Merah Font Arial Ukuran 20px </h2> <h3> Text Ini Berwarna Merah Font Arial Ukuran 20px </h3> <h4> Text Ini Berwarna Merah Font Arial Ukuran 20px </h4> </body></html>
Komentar Pada CSS
Ketika anda sedang desain layout website
biasanya akan menggunakan banyak text CSS, untuk mempermudah mengenali
text CSS yang anda buat sebaiknya anda tambahkan komentar diatas atau
dai samping Text CSS yang anda buat. Untuk menambahkan komentar pada CSS
anda bisa menggunakan kode pembuka /* dan penutup */ semua text CSS
yang ada di antara tanda tersebut tidak akan dihiraukan dan tidak akan
dijalankan oleh browser, tetapi hanya untuk cacatan pembuat website.
SOURCE: KLIK
SOCIALIZE IT →