SERIES CSS - CHAPTER 2 : STRUKTUR DAN PEMFORMATAN CSS RULE

Dayat Miftahul Jannah
11:47:07 PM
 

 
Di postingan kali ini kita akan melanjutkan tutorial Seri CSS, kali ini saya akan coba menjelaskan tentang struktur dan juga pemformatan CS rule.
 
Cascading Style Sheet (CSS) Rule adalah pernyataan yang mendefinisikan satu style atau lebih elemen di halaman web kalian. Aturan-aturan ini mengikuti struktur tertentu.

Format atau sintaks untuk CSS rule terdiri dari selector dan declaration. Declaration Blok terdiri dari beberapa declaration untuk s yang diberikan selector. Beberapa selector dapat digabungkan dalam sebuah rule.

Sebelum kita membahas lebih jauh mengenai selector dan juga declaration, kita akan bahas terlebih dahulu mengenai property list.

Property List

 
Beberapa properti dapat mengambil beberapa nilai, yang secara kolektif dikenal sebagai property list.
 
1:  /* Dua nilai dalam property list ini */  
2:  span {  
3:    text-shadow: yellow 0 0 3px, green 4px 4px 10px;  
4:  }  
5:  /* Pemformatan Alternatif */  
6:  span {  
7:    text-shadow:  
8:      yellow 0 0 3px,  
9:      green 4px 4px 10px;  
10:  }

Multiple Selectors

Saat kalia mengelompokkan CSS selectors, kalian menerapkan style yang sama ke beberapa elemen berbeda tanpa mengulangi style dalam stylesheet kalian. Kalian bisa menggunakan koma untuk memisahkan beberapa selectors yang dikelompokkan.

Contoh:

 div, p { color: blue }

Jadi warna biru berlaku untuk semua elemen <div> dan semua elemen <p>. Tanpa koma hanya elemen <p> yang child dari <div> akan berwarna merah.
 
Ini juga berlaku untuk semua jenis selectors, seperti:

 p, .blue, #first, div span{ color : blue }

Rule ini berlaku untuk:
  • <p>
  • elemen class blue
  • elemen dengan ID terlebih dahulu
  • setiap <span> di dalam <div>

Mari kita bedah sedikit lebih dalam mengenai Selectors, Multiple Selectors, Declaration dan juga Declaration Box.
 

Format atau Syntax dari CSS Rule

 
Rule sendiri seperi yang sudah saya jabarkan diatas, ia terdiri dari selectors dan declaration yang dikelilingi oleh kurung kurawa, contohnya seperti ini: 

 selector {declaration}

Selector

CSS Rule mendefinisikan style ke elemen semua halaman web menggunakan stylesheet, termasuk <body> halaman kalian dan tag HTML seperti <h1>, <p>, dan <ul>. Ketika dinyatakan dalam CSS rulr, elemen ini disebut selectors, contohnya seperti ini:

 h1 {declaration}
 

Declaration

Declaration berisi property dari selector dan nilai property. Property selalu diikuti oleh titik dua (:) dan setiap value diakhiri dengan titik koma (;).
 
 selector {property: value;}
 
Contohnya seperti ini :
 
 h1 {font-weight: bold;}
 
Penjelasan :
  • h1 adalah selector
  • font-weight adalah property dari selector untuk rule ini
  • bold adalah value (nilai) dari properti
  • {font-weight: bold;} adalah declaration
 

Declaration Box

Lebih dari satu deklarasi dapat dinyatakan untuk selector tertentu, menghasilkan declaration box, contohnya seperti ini: 

 h1 {font-weight: bold; color: green;}
 
Agar mudah untuk membaca dan mengedit, rule sering ditulis dalam bentuk seperti ini:

1:  h1 {  
2:  font-weight: bold;  
3:  color: green;  
4:  }
 

Menggunakan Multiple Selectors

Kalian bisa menyertakan beberapa selector dalam satu rule, jika semua propertinya sama, misalnya: 

 h1, h2, h3 {font-weight: bold; color: green;}
 
Atau seperti ini :
 
1:  h1, h2, h3 {  
2:  font-weight: bold;  
3:  color: green;  
4:  }
 
Karena ukurannya tidak disebutkan dalam contoh ini, maka ukuran browser web default yang akan ditampilkan. 

Kesimpulan


Syntax dari Cascading Style Sheet (CSS) Rule terdiri dari selector dan declaration. Declaration Blok terdiri dari beberapa declaration untuk s yang diberikan selector. Beberapa selector bisa digabungkan dalam sebuah rule. 
 
Kita akan membahas lebih dalam mengenai Selector di postingan berikutnya.
 
 Oke, mungkin sampai disini dulu untuk postingan Series CSS kali ini See You Next Time :).