Daftar Isi Pemanasan โ Struktur dan Sintaks Dasar CSS ๐ Selektor ๐ Blok Deklarasi ๐ Properti dan Nilainya ๐ผ Kesimpulan ๐ Penutup ๐ช
Pemanasan โ
Pada pertemuan sebelumnya “Belajar CSS untuk Pertama Kali” kita sudah mengenal tentang CSS dan sekilas juga telah menyinggung mengenai struktur dan sintaks dasar CSS dalam sub bab anatomi CSS.
Tanpa berlama lagi mari kita lanjutkan! ๐ค
Struktur dan Sintaks Dasar CSS ๐
CSS memiliki struktur kode dan sintaks dasar yang terdiri dari tiga bagian penting antara lain:
- Selektor
- Blok deklarasi
- Properti dan nilainya

Selektor ๐
Selektor (selector) merupakan kata kunci untuk menentukan elemen HTML yang akan diberi gaya (style).
/* h1 adalah selektor */
h1{ background-color: yellow; }
Kode di atas akan membuat background berwarna kuning pada semua elemen <h1>.
Kita juga dapat menentukan style yang sama pada lebih dari satu selektor (multiple selector).
h1, h2, h3, h4, h5, h6{
background-color: yellow;
}
Selektor tidak hanya berupa nama tag HTML, tapi juga dapat berupa id, class, dan atribut.
/* selektor dengan nama tag */
h1{
background-color: yellow;
}
/* selektor dengan id */
#header{
font-family: arial;
}
/* selektor dengan class */
.text-primary{
color: blue;
}
/* selektor dengan atribut */
input[type=text]{
background-color: green;
}
Blok Deklarasi ๐
Dalam CSS deklarasi berisi properti dari selektor dan nilai dari properti tersebut. Deklarasi diawali dan diakhiri dengan kurung kurawal {….}. Hal inilah yang menghasilkan blok deklarasi.
Agar lebih mudah untuk dibaca dan diedit, setiap deklarasi biasanya ditulis dalam baris baru, tidak satu baris.
Penulisan yang kurang baik
h1{ background-color: green; }
Penulisan yang baik
h1{
background-color: green;
}
Blok deklarasi dapat berisi lebih dari satu properti untuk satu selektor.
h1{
background-color: green;
color: yellow;
font-family: arial;
}
Properti dan Nilainya ๐ผ
Properti merupakan atribut atau aturan yang akan diterapkan oleh elemen yang dipilih (selektor).
Properti selalu diikuti oleh titik dua (:) sebelum mendefinisikan nilainya dan diakhiri dengan tanda titik koma (;).
Jika terdapat lebih dari satu properti dalam blok deklarasi maka tiap properti harus dipisahkan dengan titik koma (;).
h1{
background-color: green;
color: yellow;
font-family: arial;
}
Sedangkan untuk properti terakhir atau hanya berisi satu properti, boleh memakai titik koma, boleh tidak.
Properti terakhir
h1{
background-color: green;
color: yellow;
font-family: arial
}
Deklarasi dengan satu properti
h1{
background-color: green
}
Saran: Lebih baik setiap pendeklarasian properti dan nilainya diakhiri dengan titik koma, hal ini agar kode terlihat lebih rapi.
Kesimpulan ๐
Setelah mempelajari materi ini, kita dapat mengambil beberapa poin penting antara lain:
- Struktur kode dan sintaks dasar CSS terdiri dari tiga bagian penting yaitu selektor, blok deklarasi, dan properti beserta nilainya.
- Selektor bisa dikatakan elemen yang ditulis secara aturan CSS
- Selektor dapat berupa nama tag, id, class, dan atribut
- Satu selektor dapat memiliki lebih dari satu properti dan sebaliknya
- Blok deklarasi merupakan tempat untuk mendefinisikan properti dari suatu selektor beserta nilainya.
- Properti merupakan aturan (rule) yang akan digunakan oleh selektor.
Penutup ๐ช
Dalam kesempatan kali ini kita sudah membahas mengenai struktur dan sintaks dasar CSS
- Selektor โ
- Blok Deklarasi โ
- Properti dan nilainya โ
Apa selanjutnya? ๐คท
Selanjutnya kita akan membahas tentang bagaimana cara menerapkan CSS ke dokumen HTML. ๐