Belajar CSS Dasar Part 2: Dasar-dasar CSS

OKE, Sekarang kita akan masuk pada pembahasan tentang dasar-dasar CSS. Jangan tegang, silahkan putar lagu-lagu kesayangan anda dan mari belajar dengan santai :D

Syntax CSS

Apa itu Syntax CSS? Syntax CSS adalah perintah-perintah yang digunakan untuk mengatur tampilan dokumen HTML. Syntax CSS terdiri dari: Selector, Property, dan Value.

Contoh penulisan syntax CSS adalah sebagai berikut:

selector { property: value }

Apa itu Selector?

Selector adalah perintah yang menunjukan bagian mana yang ingin diformat.

Apa itu Property dan Value?
Property adalah attribute dari selector. Sedangkan Value adalah “Nilai” dari Property.

Contoh Syntax :

h1 { color: red }

Penjelasan :

h1 = Selector
color = Property
red = Value

Artinya, kita akan mengatur element HTML <h1> menjadi berwarna merah (red).

Cara Penulisan Syntax Yang Baik

Dalam penulisan Syntax CSS, Sangat disarankan untuk menggunakan beberapa baris baru dalam mengatur property dan value.
Contoh :

h1 {
color: red;
font-family: arial;
font-size: 12px
}

Lebih enak melihat yang mana? Tentu yang menggunakan beberapa baris baru bukan? :D

Komentar Pada CSS

Seperti halnya komentar pada HTML, CSS juga memiliki syntax yang mendefinisikan dirinya sebagai komentar (pengingat). Komentar pada CSS didefinisikan menggunakan syntax /* dan */ (Dibuka dengan slash bintang, dan ditutup dengan bintang slash).

Ingat! Yang namanya komentar tidak akan dibaca sebagai “code” oleh browser, tapi hanya dibaca sebagai text pengingat. Dan tentunya komentar tersebut tidak akan ditampilkan oleh browser.

Contoh Penggunaan Komentar CSS :

/* ini adalah syntax css untuk element h1 */
h1{
font-family: arial;
color: red;
}

Oke, karena kita sudah mempelajari dasar-dasar CSS, maka pada pembahasan selanjutnya kita akan belajar mengimplementasikan CSS pada suatu dokumen HTML. Are you ready?