Syntax Dasar CSS

CSS terdiri dari aturan gaya yang diinterpretasikan oleh browser dan kemudian diterapkan pada elemen-elemen yang sesuai dalam sebuah dokumen .Style terdiri dari tiga bagian 

  1. Selector − Sebuah selector adalah tag HTML di mana gaya akan diterapkan. Ini bisa menjadi tag apa pun seperti <h1> atau <table> dll.
  2. Property − Sebuah properti adalah jenis atribut dari tag HTML. Secara sederhana, semua atribut HTML dikonversi menjadi properti CSS. Mereka bisa berupa warna, border, dll.
  3. Values − Nilai diberikan kepada properti. Sebagai contoh, properti color bisa memiliki nilai merah atau #F1F1F1 dll.

Kita dapat menggunakan Syntax style CSS sebagai berikut 

selector { property: value }

contohnya penerapannya sebagai berikut

table{ border :1px solid #C00;

pada css diatas tabel adalah selector dan border adalah properti dan Values yang diberikan 1px solid #C00 adalah nilai properti itu.

Universal Selectors

universal selector akan memberi efek kedalam seluruh elemen di dokumen kita. contoh penerapannya sebagi berikut

* { 
   color: #000000; 
}

css di atas akan membei efek warna hitam pada seluruh konten yang ada dihalaman dokumen yang kita miliki.

Descendant Selectors

Descendant selector (Selektor Turunan) adalah css yang memberikan efek  hanya jika element tersebut terletak di dalam elemen tertentu. Seperti yang diberikan dalam contoh berikut, style akan berlaku untuk elemen <em> hanya jika elemen tersebut terletak di dalam tag <ul>.

ul em {
   color: #000000; 
}

Class Selectors

kita dapat menentukan style berdasarkan atribut kelas elemen. Semua elemen yang memiliki kelas tersebut akan diformat sesuai dengan style yang ditentukan. penulisan style class dapat menggunakan simbol titik [.] diikuti nama class. contohnya sebagai berikut

.black {
   color: #000000; 
}

style ini akan menghasilkan konten berwarna hitam untuk setiap elemen dengan atribut class black di dokumen kita. selain itu kita juga dapat membuat class tersebut lebih khusus. Misalnya class black hanya akan diterapkan pada heading 1 saja. maka penulisan css dapat dicontohkan sebagai berikut

h1.black {
   color: #000000; 
}

ID Selectors

berikutnya ID selector. kita dapat menentukan style berdasarkan atribut id elemen. Semua elemen yang memiliki id tersebut akan diformat sesuai dengan aturan yang ditentukan. contohnya

#black {
   color: #000000; 
}

 Sama halnya dengan class id juga memiliki selector turunan yang akan berefek khusus di dalam sebuah elemen. contohnya kita akan menerapkan warna hitam dalam seluruh elemen h1.

h1#black {
   color: #000000; 
}

Child Selectors

selector ini akan memberikan efek turunan terhadap sebuah elemen. contohnya:

body > p {
   color: #000000; 
}

 kode css diatas akan membuat semua paragraf berwarna hitam jika merupakan turunan langsung dari elemen <body>. Paragraf lain yang dimasukkan ke dalam elemen lain seperti <div> atau <td> tidak akan berpengaruh pada aturan ini.

Attribute Selectors

Kita juga dapat menerapkan style pada elemen HTML dengan atribut tertentu.style di bawah ini akan mencocokkan semua elemen input yang memiliki atribut type dengan nilai teks

input[type = "text"] {
   color: #000000; 
}

Multiple Style Rules

Dalam CSS kita dapat membuat banya format yang akan kita terapkan dalam element web kita. sebagai contoh kita ingin membuat aturan untuk heading 1 dengan warna tertentu ketebalan text margin hanya dalam 1 aturan css. sebagi contoh

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

baris kode css diatas dipisahkan oleh semicolone ; yang menandakan akhir dari masing-masing baris perintah. 

<< CSS Home