CSS Dasar : Anatomi Pada CSS

Anatomi CSS : Ini adalah artikel ke dua dari seri CSS Dasar diwebsite Abdul Rosyid, dimana diseri ini kita akan membahas mengenai sesuatu yang disebut dengan anatomi CSS.

 

Di seri sebelumnya kita sudah belajar mengenai struktur dari HTML mungkin kalian masih inget dimana dua buah tag HTML itu punya nama tag, bisa atribut dan bisa ada nilai (Value), sama seperti HTML, CSS pun punya anatomi sendiri kita bisa lihat anatomi atai strukturnya seperti dibawah ini:


selector { property : value; }

Jadi kalua kalian lihat pada sintaks tersebut di CSS itu terbagi menjadi beberapa bagian :

Pertama bisa disebut selector, lalu didalamnya terdapat property dan value, jika kalian lihat property dan valuenya itu dibatasi dengan kurung kurawal buka dan kurung kurawal tutup, kemudian setelah property itu ada titik dua ( : ) valuenya apa dan diakhiri dengan titik koma ( ; ), jadi itulah sintaks yang harus kalian tuliskan untuk membuat satu deklarasi dari CSS.


h1 { color : blue; }

Misal saya mempunyai sintaks seperti diatas => h1 { color : blue; } , ini artinya saya pingin membuat seluruh tulisan yang ada didalam h1 dihalaman saya itu warnanya berubah menjadi biru, jadi urut urutannya tuliskan dulu selectornya lalu didalamnya terdapat property, dan tiap property itu pasti punya yang Namanya value, dan jangan lupa bungkus semuanya dengan {}.

 

Jika kalian nanti punya lebih dari satu property itu kalian bisa tuliskan sebelah kanan setelah titik koma atau kalian bisa tuliskan kebawah, seperti dibawah ini.

 

Misal kita pingin memberikan h1 tadi  lebih dari satu property , misalkan :


h1 {

   font-family: arial;

   text-align: center;

   font-size: 50px;

   color: purple;

}

 

Jadi nanti kita akan bahas masing masing komponen tersebut yang ada dideklarasi tersebut, pertama yang akan kita bahas adalah mengenai selector, apa itu selector ? , kalua kita lihat teorinya .

 

SELECTOR

  • Digunakan untuk memilih dan memanipulasi elemen spesifik pada HTML.
  • Elemen HTML dipilih berdasarkan tag, id, class, bahakan pola / pattern.
  • Semakin kompleks struktur HTML, selector juga bisa semakin kompleks / spesifik.

 

Mungkin itu dulu penjelasan singkat mengenai anatomi dari CSS, sekali lagi saya ulang bahwa satu deklarasi CSS itu punya selector, property dan value, nanti kalian bisa batasi atau bungkus property dan valuenya dengan {}.

 

Di materi selanjutnya apa yang kita bahas ? kita akan mulai ngoding, jadi ditunggu aja siap siap, saya Abdul Rosyid Pamit , Terimakasih .

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *