Basis Grammar CSS
- Apakah spasi akan mempengaruhi efektifitas kerja CSS di browser, sama seperti, berbeda dengan XHTML, CSS tak sensitif terhadap huruf besar dan kecil. Namun ada pengecualian: jika berhubungan dengan dokumen HTML, nama class dan id akan sensitif terhadap huruf besar dan kecil. Ringkasan CSS
- Hal Sebelumnya Grammar Tingkat Lanjut CSS
CSS Syntax
Aturan CSS terdiri dari dua bagian utama: selector, serta satu atau beberapa deklarasi.
selector {declaration1color:red declaration2; ... declarationN font-family: Georgia, Palatino, serif;
Selector biasanya adalah elemen HTML yang ingin Anda ubah gayanya.
Setiap deklarasi terdiri dari sebuah property dan nilai.
Property (property) adalah atribut gaya (style attribute) yang ingin Anda tetapkan. Setiap property memiliki nilai. Property dan nilai dipisahkan dengan tanda titik koma.
selector {property: valuefont-family: Georgia, Palatino, serif;
Perintah baris di bawah ini adalah untuk menentukan warna teks elemen h1 menjadi merah, serta mengatur ukuran font menjadi 14 paksi.
Dalam contoh ini, h1 adalah selector, color dan font-size adalah property, red dan 14px adalah nilai.
h1 {color:red; font-size:14px;}
Gambar di bawah ini menunjukkan struktur kode di atas:
Petunjuk:Gunakan kurung kurawal untuk melingkungi deklarasi.
Pola penulisan nilai dan unit
Selain kata bahasa Inggris red, kita juga dapat menggunakan nilai warna heksadesimal #ff0000:
p { color: #ff0000; }
Untuk menghemat byte, kita dapat menggunakan bentuk singkat CSS:
p { color: #f00; }
Kami dapat menggunakan dua metode untuk menggunakan nilai RGB:
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
Perhatikan, saat menggunakan persen RGB, walaupun nilai 0 juga perlu menulis simbol persen. Tetapi di situasi lainnya tidak perlu melakukan hal ini. Misalkan, saat ukuran adalah 0 paksi, setelah 0 tidak perlu menggunakan unit px, karena 0 sudah adalah 0, tanpa mengapa unitnya apa.
Ingatkan untuk menulis tanda kutip
Petunjuk:Jika nilai berupa beberapa kata, perlu menambahkan tanda kutip ke nilai tersebut:
p {font-family: "sans serif";}
Deklarasi berbagai tingkatan:
Petunjuk:Jika ingin menentukan lebih dari satu deklarasi, perlu menggunakan tanda titik koma untuk memisahkan setiap deklarasi. Contoh di bawah ini menunjukkan bagaimana untuk mendefinisikan paragraf yang teksnya berada di tengah. Aturan terakhir adalah tidak perlu menambahkan tanda koma, karena tanda koma di bahasa Inggris adalah simbol pemisah, bukan simbol penutup. Namun, sebagian besar desainer yang berpengalaman akan menambahkan tanda koma di akhir setiap deklarasi, hal ini mempermudah untuk mengurangi kesalahan saat menambahkan atau mengurangi deklarasi yang ada. Seperti ini:
p {text-align:center}color:red color:redcolor:redfont-family: Georgia, Palatino, serif;
;
Anda seharusnya mendeskripsikan hanya satu properti per baris, hal ini akan meningkatkan keterbacaan definisi gaya, seperti ini:
p {
text-align: center;
color: black;
font-family: Georgia, Palatino, serif;
font-family: arial;
Spasi dan Huruf Besar/Kecil
Sebagian besar stylesheet mengandung lebih dari satu aturan, dan sebagian besar aturan mengandung lebih dari satu deklarasi. Pemakaian deklarasi ganda dan spasi membuat stylesheet lebih mudah untuk disunting:
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
- Apakah spasi akan mempengaruhi efektifitas kerja CSS di browser, sama seperti, berbeda dengan XHTML, CSS tak sensitif terhadap huruf besar dan kecil. Namun ada pengecualian: jika berhubungan dengan dokumen HTML, nama class dan id akan sensitif terhadap huruf besar dan kecil. Ringkasan CSS
- Hal Sebelumnya Grammar Tingkat Lanjut CSS
