Introducing CSS

Seperti yang sudah pernah kuberitahu ke kalian. Kita kemarin sudah membuat kerangka dari rumah kita, strukturnya sudah ada. Nah sekarang kita butuh untuk mempercantik strukturnya membuatnya lebih nyata.

Nah itulah peran dari CSS atau Cascading Style Sheets.

Hah? "cascading" ?

Setiap elemen di HTML itu bisa kita styling, bisa kita beri warna, posisinya, ukurannya, dan lain-lain. Nah mau dikasi warna apa, ukuran apa itu namanya aturan atau "rule". Kita bisa memberikan lebih dari satu rule untuk sebuah elemen dan CSS akan otomatis menentukan rule apa yang diaplikasikan. Dan itu yang dimaksud dari "cascading".

Di sini aku mau jelasin dulu singkatnya gimana cara CSS bekerja dulu. Kalian ga harus paham dulu di sini karena akan di bahas di bagian selanjutnya.

Lihat Ini Dulu

Contoh aku punya elemen div yang kuberi sebuah class beranama main-container.

<div class="main-container">
  <p>Some text</p>
</div>

Kalian mungkin kemarin bertanya-tanya apa sih gunanya class atau id ituh? Nah salah satu manfaaat atau kegunaannya adalah untuk mendefine rule dari CSS. Jadi kalau kalian lihat lagi, nama class main-container bisa aku jadikan rule untuk CSS.

Rule main-container tadi bisa ku tulis di CSS seperti ini:

.main-container {
	color:red;

Terlihat di situ aku memberi titik . di depan main-container, yang mengartikan bahwa ini adalah selector class. Jika selectornya untuk ID pakai hastag # misal contoh id="title" maka selectornya ditulis #title. Maksud selector adalah "pilih .main-container dan aplikasikan properti yang ada di dalamnya".

Jadi setiap elemen yang mempunyai class main-container, aplikasikan properti color:red atau warnanya jadi merah. Untuk warna di sini adalah warna foreground, jadi bisa seperti teks. Nah terus warnanya bakal diaplikasikan kemana? Di elemen yang ada di dalamnya.

Kalau kalian lihat lagi, di dalam div ada <p>Some Text</p>, karena itu ada di dalam div yang memiliki class main-container... maka warna teks dari Some Text akan berwarna merah.

Sekarang saya akan tambahkan beberapa atribut aturan lagi.

.main-container {
	color:red;
	font-size: 72px;
}

Di sini saya mengatur font-size atau ukuran font untuk elemen ini adalah 72px atau 72 pixel.

Sekarang coba saya buat elemen dengan id seperti ini:

<div>
	<h1 id="judul">Hello, World</h1>
</div>

Kemudian di CSS nya seperti ini:

#judul {
	font-size: 32px;
}

Maka elemen dengan id judul akan memiliki ukuran teks / font sebesar 32px.

Di CSS ada tiga tipe selector:

Tipe	Penulisan	Contoh
Tag Selector	Nama tag saja	p {}
Class Selector	Nama class dengan titik di depan	.ambasing {}
ID Selector	Nama id dengan hastag di depan	#amba {}

Berikut adalah penjelasan dari kosakata yang sudah kita bahas:

Oke sip

Nah semoga kalian sudah ada gambaran sedikit bagaimana kita bakal main CSS setelah ini. Nah di bagian selanjutnya kita akan praktik gimana cara kita bisa mengaplikasikan CSS di website kita.

Semangattt