CSS merupakan singkatan dari Cascading Style Sheet. Mudahnya, CSS berfungsi untuk mempercantik tampilan halaman web. Dalam tugasnya, CSS mendampingi HTML untuk mengatur bagaimana sebuah elemen HTML ditampilkan, misalnya ukurannya, warnanya, spasi, dan lain sebagainya.

Penulisan CSS Syntax

CSS ditulis dengan format sebagai berikut.

h1{
	color: blue;
	font-size: 20px;
}

Penulisan sintak CSS di atas dapat dibagi menjadi beberapa bagian:

  • h1 di atas disebut bagian “selector“. Bagian ini menunjukkan target/sasaran pengaruh kode CSS pada halaman HTML. Artinya, kode di atas mengarah pada seluruh elemen <h1> pada suatu halaman HTML.
  • color di atas adalah salah satu contoh “property“. Bagian ini menunjukkan sifat/perilaku target apa yang akan diubah oleh CSS. Dalam hal ini, color akan mengubah warna teks dari heading h1.
  • blue adalah “value” dari property color. Artinya, teks heading h1 akan ditampilkan dengan warna biru.
  • font-size juga merupakan property, yang mengatur ukuran font dari sebuah elemen.
  • 20px merupakan nilai dari property font-size. Artinya, elemen h1 akan berukuran 20px jika ditampilkan di browser.

CSS Selector

Selector yang sudah dijelaskan di atas dapat berupa elemen, ID, atau Class. Selector elemen contohnya pada kode di atas, yaitu dengan target heading h1.

ID Selector

Pilihan kedua adalah menggunakan ID Selector. Tag HTML dapat memiliki atribut “id” dan diberi nilai sesuka kita. Cara penulisan ID selector adalah menggunakan tanda pagar (#). Contohnya, misal kita memiliki elemen paragraf dengan id “paragraf_a”. Kita bisa tuliskan seperti kode HTML di bawah ini.

<p id="paragraf_a">Hello World!</p>

Maka, untuk mengarahkan CSS ke dalam paragraf tersebut, kita perlu menulis syntax CSS sebagai berikut.

#paragraf_a{
    font-size: 15px;
}

Class Selector

Pilihan ketiga adalah menggunakan Class Selector. Tag HTML dapat memiliki atribut “class” dan diberi nilai sesuka kita. Cara penulisan Class Selector adalah menggunakan tanda titik (.). Contohnya, misal kita memiliki elemen paragraf dengan class “common_paragraf”. Kita bisa tuliskan seperti kode HTML di bawah ini.

<p class="common_paragraf">Hello World!</p>

Maka, untuk mengarahkan CSS ke dalam paragraf tersebut, kita perlu menulis syntax CSS sebagai berikut.

.common_paragraf{
    font-size: 15px;
}

ID vs Class

ID dan Class sebaiknya digunakan sesuai dengan anjuran berikut. ID merupakan atribut yang dapat digunakan pada elemen yang unik pada suatu halaman (hanya ada satu dalam halaman HTML tersebut). Sedangkan class, elemen HTML yang berbeda dapat menggunakan nama class yang sama dalam atributnya.

Untuk melihat bagaimana CSS in action, silakan buka artikel selanjutnya! Happy coding!