CSS - Aturan Penulisan Kode

Dimateri sebelumnya sudah dibahas mengenai CSS External dimana anda sendiri membuat aturan penulisan kode pada satu halaman dan menyimpannya dalam file extensi .css. Kali ini kita akan membahas mengenai bagaimana sebenarnya aturan penulisan kode CSS itu atau biasa disebut syntax. Syntax CSS itu sendiri terdiri atas selector dan deklarasi.

css_selector

Selector merupakan elemen HTML yang akan diubah style-nya dalam hal ini contohnya adalah H1 Title (warna biru). Sedangkan Declaration adalah kode yang terdiri dari satu atau beberapa deklarasi yang dipisahkan oleh tanda “;” . Setiap Declaration, dipisahkan dengan tanda titik koma (;). Dan tak ada batasan mau berapa deklarasinya, seperti diatas terdapat 2 deklarasi.

{  color: biru;
  background-color:
  kuning; }

Setiap membuat declaration mesti dimulai dengan “{“ dan ditutup dengan “}” Pada setiap declaration terdapat property (color, background-color yang warna merah, yang merupakan atribut dari tag HTML yang akan diubah style-nya menjadi properti CSS.

Itu isa terdiri dari warna, background dll, sedangkan value (blue, yellow yang berwarna hitam), merupakan nilai ditetapkan ke properti. Misalnya, property color diatas valuenya blue/biru, dan background-color diatas valuenya yellow.

Dan setiap syntax anda bisa menyelipkan sebuah komentar, seperti pembahasan yang telah lalu, jadi komentar akan berguna untuk menjelaskan kode yang telah sobat buat, dapat membantu anda jika pada suatu saat nanti ingin lakukan debug atau mengedit sumber kode tersebut.

Dan perlu dicatat penggunaan komentar tidak akan mempengaruhi proses eksekusi syntax karena komentar akan di abaikan oleh web browser. Komentar pada CSS di awali oleh

/* dan di akhiri oleh */

komentar seperti ini pun dapat menjangkau multi baris:

H1 { color: blue;
background-color: yellow;
/*komentar satu baris*/
}
/*komentar multi baris*/

Selector

Untuk selector sendiri terdapat beberapa jenis dan sangat case sensitive yang artinya penulisan kode tidak boleh sembarang karena besar kecil huruf juga berpengaruh. Type Selector, jenis ini Sesuai dengan nama elemen HTML seperti contoh diatas yaitu H1, H2, H3. Jadi targetnya adalah elemen H1:

h1 {
   color: blue;
}

Universal Selector

Aplikasinya pada semua elemen dalam dokumen HTML

* {
   color: blue;
}
*{}

yang menarget semua elemen dalam halaman Descendant Selector, ketika ingin menerapkan sytle ke elemen tertentu hanya ketika itu terletak di dalam elemen tertentu. Jadi disini anda mengatur style pada sebuah elemen yang merupakan turunan dari elemen lain yang dispesifikasikan

Contoh: file descendat.css berisi:

#container .h1 { color:red;  text-align:center;   font-size:3em; }
#contoh h2{  color:blue; font-size: 30px; }

Maka penggunaan css ini di html,

<html><head> <title>Contoh Descendat Selector</title>
<link rel= "stylesheet" href="descendant.css"></head>
<body>

<div id="container">
    <div class="h1">Heading1 dengan descendant selector </div>
</div>

<div id="contoh">
    <h2>Heading2 dengan descendant selector </h2>
</div>

<h2>Heading2 secara default</h2>

</body>
</html>

The Class Selectors,

Disini Anda bisa menentukan aturan gaya berdasarkan atribut kelas dari elemen. Semua elemen yang memiliki kelas itu akan diformat sesuai dengan aturan yang ditetapkan

.black {
  color: #000000;
}

Aturan ini menampilkan konten dalam warna hitam untuk setiap elemen dengan atribut kelas diatur menjadi hitam di dokumen kami. Anda dapat membuatnya sedikit lebih khusus. Sebagai contoh:

h1.black {
  color: #000000;
}

Aturan ini menampilkan konten dalam warna hitam hanya untuk elemen

<h1>

dengan atribut kelas disetel ke hitam.

Anda dapat menerapkan lebih dari satu pemilih kelas ke elemen yang diberikan. Perhatikan contoh berikut:

<p class="center bold">
  Stylenya berdasarkan class center dan bold.
</p>

ID Selector,

Mengatur style pada elemen yang memiliki atribut id dimana value nya sesuai dengan yang dituliskan setelah tanda “#”.

#black {
   color: #000000;
}

Aturan ini merender konten dalam warna hitam untuk setiap elemen dengan atribut id diatur menjadi hitam di dokumen kami. Anda dapat membuatnya sedikit lebih khusus. Misalnya –

h1#black {
   color: #000000;
}

Aturan ini merender konten dalam warna hitam hanya untuk elemen

<h1>

dengan atribut id diatur ke hitam.

Kekuatan sebenarnya dari pemilih id adalah ketika mereka digunakan sebagai fondasi untuk pemilih keturunan, Sebagai contoh:

#black h2 {
   color: #000000;
}

Dalam contoh ini, semua h2 akan ditampilkan dalam warna hitam ketika judul tersebut akan terletak pada tag yang memiliki atribut id diatur ke hitam

Child Selector

Mengatur style elemen yang merupakan “anak” atau sub elemen yang lain

body > p {
   color: #000000;
}

Aturan ini akan membuat semua paragraf berwarna hitam jika mereka adalah anak langsung dari elemen . Paragraf lain memasukkan elemen-elemen lain seperti

atau tidak akan memiliki efek apapun dari aturan ini.