Cara Penulisan / Syntax CSS
Syntax CSS terdiri dari 3 bagian yaitu: selector, property dan value
Property adalah atribut atau perlengkapan yang akan kita definisikan/kita rubah
Value adalah nilai dari property, setiap property mempunyai satu value.
Dalam penulisannya property dan value dipisahkan dengan titik dua dan diletakkan dalam kurung kurawal
Contoh
Jika kita mempunyai lebih dari satu property, maka setiap property harus dipisah dengan titik koma.
Contoh
Untuk memudahkan pembacaan, setiap property sebaiknya ditulis dalam baris yang terpisah.
Contoh
Pengelompokan Selector
Selector yang mempunyai pengaturan yang sama bisa kita kelompokkan menjadi satu dengan syarat setiap selector harus dipisahkan dengan tanda koma.
Misalnya kita ingin membuat 4 header dengan nama h1,h2,h3,h4 dan mempunyai warna text yang sama yaitu merah. Maka kita bisa membuatnya dengan kode CSS begini:
Syntax CSS terdiri dari 3 bagian yaitu: selector, property dan value
selector {property: value}
Selector adalah nama bagian halaman HTML yang akan kita definisikanProperty adalah atribut atau perlengkapan yang akan kita definisikan/kita rubah
Value adalah nilai dari property, setiap property mempunyai satu value.
Dalam penulisannya property dan value dipisahkan dengan titik dua dan diletakkan dalam kurung kurawal
Contoh
Body {background: red}
Jika kita mempunyai lebih dari satu property, maka setiap property harus dipisah dengan titik koma.
Contoh
p {text-align:center;color:red}
Untuk memudahkan pembacaan, setiap property sebaiknya ditulis dalam baris yang terpisah.
Contoh
p
{
text-align: center;
color: black;
font-family: arial
}
{
text-align: center;
color: black;
font-family: arial
}
Pengelompokan Selector
Selector yang mempunyai pengaturan yang sama bisa kita kelompokkan menjadi satu dengan syarat setiap selector harus dipisahkan dengan tanda koma.
Misalnya kita ingin membuat 4 header dengan nama h1,h2,h3,h4 dan mempunyai warna text yang sama yaitu merah. Maka kita bisa membuatnya dengan kode CSS begini:
h1,h2,h3,h4
{
color: red
}
{
color: red
}
Leave a comment