Perbedaan dan Jenis Jenis Selector Pada CSS

CSS memiliki aturan dalam penulisannya, yaitu ada bagian utama yang dinamakan selector dan ada satu atau lebih di namakan deklarasi.

Perbedaan Selector Property dan Value

Bagian Selector biasanya ditulis menggunakan perintah html, sedangkan deklarasi biasanya terdiri dari properti-properti dan nilai.

Selector
Selector sebagai elemen yang akan dimanipulasi, selector selalu berada di luar kurung kurawal "{}" jadi yang berada di sebelum tanda kurung kurawal merupakan selector seperti gambar diatas.

Property
Property adalah parameter suatu selektor yang akan di beri nilai atau value, CSS mempunyai beberapa property untuk menghasilkan style apa yang di inginkan

Value
Value adalah nilai dari Property, antara property dan value harus di pisahkan dengan titik dua ":" dan diakhiri dengan titik koma ";".

Perbedaan ID dan Class

Selain menggunakan element html sebagai selector pada css, kita bisa menggunakan selector yang kita buat sendiri. Selector ini selanjutnya bisa kita pakai pada elemen-element dalam HTML dengan cara memanggilnya. Ada dua selector yang bisa kita buat yakni id dan class.

ID Selector

ID Selector digunakan untuk menemtukan style yang unik, id digunakan hanya satu kali saja untuk halaman web, maka dari itu style ini hanya berlaku pada id yang di tulis pertama saja jika style ini digunakan lebih dari satu.

ID didefinisikan dengan tanda pagar "#"

<!-- Contoh CSS -->

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

<!-- Contoh HTML -->
 
<p id="Para1"> Ini adalah paragraf yang menggunakan style </p>
<p> ini adalah paragraf yang tidak menggunakan style </p>

Haslinya :

Ini adalah paragraf

ini adalah paragraf yang tidak menggunakan style

Class Selector
Class Selector digunakan untuk menentukan style dalam sekelompok elemen. Berbeda dengan ID selector, class selector paling sering digunakan pada beberapa elemen. Hal ini memungkinkan kalian untuk menetapkan style tertentu untuk banyak elemen HTML dengan class yang sama.
Class didefinisikan dengan titik "."

<!-- Contoh CSS -->

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

<!-- Contoh HTML -->
 
<h1 class="center"> Ini adalah Heading </h1>
<p class="center"> Ini adalah Paragraf </p>

Hasilnya :

Ini adalah Heading

Ini adalah Paragraf

kalian juga dapat menentukan bahwa elemen HTML hanya khusus harus dipengaruhi oleh class.
Dalam contoh di bawah, semua <p> elemen dengan class = "center" akan rata tengah dan berwarna merah :

<!-- Contoh CSS -->

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

<!-- Contoh HTML -->
 
<h1 class="center"> Ini adalah Heading </h1>
<p class="center"> Ini adalah Paragraf </p>

Hasilnya :

Ini adalah Heading

Ini adalah Paragraf

Pengelompokan Selector
jika kalian memiliki elemen dengan difinisi yang sama seperti berikut :

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

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

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

kalian bisa mengelompokan untuk meminimalkan kode seperti berikut :

<!-- Contoh CSS --> 
 
h1, h2, p {
    text-align: center;
    color: red;
}

<!-- Contoh HTML -->
 
<h1>Ini adalah Heading lvl 1</h1>
<h2>Ini adalah Heading lvl 2</h2>
<p>Ini adalah Paragraf<p>

Hasilnya :

Ini adalah Heading lvl 1