Artikel ini merupakan artikel ke #03 dari seri Tutorial CSS Dasar untuk Pemula. Pada artikel kali ini kita akan bahas mengenai Struktur dan Sintaks Dasar CSS. Jika kalian sekiranya sudah paham tentang topik materi di bawah ini, mungkin bisa lanjut ke materi berikutnya yaitu Mengenal 5 Macam Selector Dasar di CSS.
Daftar Isi - Pemanasan - Struktur dan Sintaks Dasar CSS - Selektor - Blok Deklarasi - Properti dan Nilainya - Pendinginan - Referensi
Pemanasan
Pada artikel pertama kita sudah mengenal tentang CSS dan sekilas juga telah menyinggung mengenai anatomi CSS.
Nah, untuk artikel kali ini kita akan coba mengulang kembali mengenai materi ini, bedanya pada artikel ini akan ada informasi tambahan mengenai selektor, property, dan lain-lain.
Baik, 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
Selector
Selektor (selector) merupakan kata kunci untuk menentukan elemen HTML yang akan kita beri 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 kita lebih mudah untuk membaca dan mengeditnya, saya sarankan untuk menulisnya seperti di bawah ini.
Penulisan yang baik
h1{
background-color: green
}
Penulisan yang kurang baik
h1{ background-color: green }
Meskipun di dalam blok deklarasi hanya berisi satu properti dan nilainya.
Namun, blok deklarasi juga dapat berisi lebih dari satu properti untuk satu selector.
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).
Untuk mendefinisikan nilai properti, kita perlu menggunakan tanda titik dua (:) setelah penulisan nama properti.
Jika terdapat lebih dari satu properti dalam blok deklarasi maka tiap properti harus kita pisahkan dengan titik koma (;).
h1{
background-color: green;
color: yellow;
font-family: arial;
}
Sedangkan untuk properti terakhir atau hanya berisi satu properti, kita boleh memakai titik koma ataupun tidak di akhir penulisan.
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 tidak rancu.
Pendinginan
Dalam kesempatan kali ini kita sudah membahas mengenai struktur dan sintaks dasar CSS yang meliputi beberapa hal seperti selektor, blok deklarasi, properti beserta nilainya.
Apa selanjutnya?
Selanjutnya kita akan membahas tentang 5 Macam Selector Dasar di CSS.
Referensi
[1] CSS Anatomy and Terminology - Catalin
