Belajar CSS Part 3 - Syntax dan Selector CSS

Syntaks dan Selector

Sintaks CSS

Aturan CSS terdiri dari selector dan block declaration.

Selektor mengarah ke elemen HTML yang ingin Anda beri style.
Block declaration berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.
Setiap deklarasi menyertakan nama CSS property dan value
CSS property dan value dipisahkan oleh titik dua.
Beberapa deklarasi CSS dipisahkan dengan titik koma, dan block declaration dikelilingi oleh tanda kurung kurawal.

Contoh

Dalam contoh ini, semua elemen akan diratakan tengah, dengan warna teks merah:

p {
  color: red;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Hello World!</p>
<p>Paragraf ini diberi style menggunakan CSS.</p>

</body>
</html>

Penjelasan:

p adalah selector dalam CSS (ini mengarah ke elemen HTML yang ingin Anda berikan style: ).

color adalah property, dan red merupakan nilai property
text-align adalah property, dan center merupakan nilai properti

Hasilnya:

Kita akan belajar lebih banyak tentang selector CSS dan properti CSS di tutorial selanjutnya!

Selector

Selector CSS memilih elemen HTML yang ingin Anda atur. Selector CSS digunakan untuk "menemukan" (atau memilih) elemen HTML yang ingin Anda beri style.

Kita dapat membagi pemilih CSS menjadi lima kategori:

Simple selector (memilih elemen berdasarkan nama, id, class)
Combinator selector (memilih elemen berdasarkan hubungan tertentu di antara elemen tersebut)
Pseudo-class-selector (memilih elemen berdasarkan keadaan tertentu)
Pseudo-elements-selector (memilih dan memberi style bagian dari elemen)
Atrribute selector (memilih elemen berdasarkan atribut atau nilai atribut)

Pada tutorial ini akan menjelaskan selector CSS paling dasar.

Elemen CSS Selector

Elemen selector memilih elemen HTML berdasarkan nama elemen.

Contoh

Disini, semua elemen pada halaman akan diratakan tengah, dengan warna teks merah:

p {
  text-align: center;
  color: red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Paragraf ini diratakan tengah dan berwarna merah</p>
<p id="para1">Paragraf ini juga!</p>
<p>Dan yang ini!</p>

</body>
</html>

Hasilnya:

CSS Selector Id

Selector id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu. Id sebuah elemen bersifat unik dalam sebuah halaman, jadi selector id digunakan untuk memilih satu elemen yang unik!

Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen.

Contoh

Aturan CSS di bawah ini akan diterapkan ke elemen HTML dengan id = "para1":

#para1 {
  text-align: center;
  color: red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p id="para1">Hello World!</p>
<p>Paragraf ini tidak dipengaruhi oleh style.</p>

</body>
</html>

Hasilnya:

Catatan: Nama id tidak boleh dimulai dengan angka!

CSS Class Selector

Class Selector memilih elemen HTML dengan atribut class tertentu. Untuk memilih elemen dengan class tertentu, tulis karakter titik (.), diikuti dengan nama class.

Contoh

Dalam contoh ini, semua elemen HTML dengan class = "center" akan berwarna merah dan rata tengah:

.center {
  text-align: center;
  color: red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 class="center">Heading yang diberi style huruf berwarna merah dan jajaran teks rata tengah. </h1>
<p class="center"> Paragraf yang diberi style huruf berwarna merah dan jajaran teks rata tengah.</p> 

</body>
</html>

Hasilnya:

Anda juga dapat menentukan bahwa hanya elemen HTML tertentu yang harus dipengaruhi oleh sebuah class.

Contoh

Dalam contoh ini, hanya elemen dengan class = "center" yang berwarna merah dan rata tengah:

p.center {
  text-align: center;
  color: red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 class="center">Heading ini tidak akan dipengaruhi oleh pengaturan style. </h1>
<p class="center">Paragraf ini dipengaruhi oleh pengaturan style dengan huruf berwarna merah dan jajaran teks rata tengah. </p> 

</body>
</html>

Hasilnya:

Elemen HTML juga dapat merujuk ke lebih dari satu class.

Contoh

Dalam contoh ini elemen akan diberi style sesuai dengan class = "center" dan ke class = "large":

p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 class="center">Heading ini tidak akan dipengaruhi oleh pengaturan style. </h1>
<p class="center">Paragraf ini dipengaruhi oleh pengaturan style dengan huruf berwarna merah dan jajaran teks rata tengah. </p>

<p class="center large">Paragraf ini akan berwarna merah, jajaran teks rata tengah, dan ukuran huruf besar. </p> 

</body>
</html>

Hasilnya:

Catatan: Nama class tidak boleh dimulai dengan angka!

CSS Universal Selector

Selektor universal (*) memilih semua elemen HTML di halaman.

Contoh

Aturan CSS di bawah ini akan memengaruhi setiap elemen HTML di halaman:

* {
  text-align: center;
  color: blue;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Hello world!</h1>

<p>Setiap elemen di dalam halaman akan dipengaruhi oleh style</p>
<p id="para1">Elemen ini juga!</p>
<p>dan yang ini!</p>

</body>
</html>

Hasilnya:

CSS Grouping Selector

Grouping Selector memilih semua elemen HTML dengan definisi style yang sama. Lihat kode CSS berikut (elemen h1, h2, dan p memiliki definisi style yang sama):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

Akan lebih baik mengelompokkan selector untuk menghemat penggunaan banyak kode. Untuk mengelompokkan selector yang lebih dari satu, pisahkan setiap selector dengan koma.

Contoh

h1, h2, p {
  text-align: center;
  color: red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Hello World!</h1>
<h2>Heading kecil!</h2>
<p>Ini adalah sebuah paragraf.</p>

</body>
</html>

Hasilnya:

Semua CSS Simple Selector dalam tabel berikut!

Selector	Contoh	Deskripsi
#id	#namadepan	Memilih elemen dengan id=”namadepan”
.class	.intro	Memilih semua elemen dengan class=”intro”
p.intro	element.class	Hanya memilih elemen dengan class=”intro”
*	*	Memilih semua elemen
p	element	Memilih semua elemen <p>
div,p	element.element,..	Memilih semua elemen <div> dan semua elemen <p>