Setiap bahasa pemrograman komputer mempunyai aturan penulisan (sintaksis) yang berbeda. Bila Anda membuat program dengan Java, kode program harus ditulis dengan sintaksis Java. Anda tidak dapat menulis program Java menggunakan sintaksis dari bahasa pemrograman lain seperti Delphi atau menulis semaunya tanpa sintaksis. Bila demikian, kode program tidak dikenali dan tidak dapat dieksekusi oleh compailer Java.

Demikian halnya ketika Anda menulis kode CSS untuk memberi style (gaya) pada tag HTML tertentu atau untuk keseluruhan laman web, CSS juga mempunyai aturan penulisan (sintaksis) sendiri. Bila sintaksis CSS salah, browser tidak dapat menterjemahkan atau diterjemahkan secara keliru. Karena itu, penting untuk menggunakan sintaksis CSS yang benar agar kode CSS dapat diterjemahkan oleh web browser.

Artikel menarik lainnya:

Kode CSS sendiri terdiri dari tiga elemen yaitu selector, property dan value. Selector adalah elemen HTML yang mana saja, property adalah tipe atribut yang ingin diterapkan pada tag HTML dan value adalah nilai yang diberikan ke property. Adapun sintaksis CSS adalah sebagai berikut:

selector {property-name:value;}

Sebagai contoh, Anda dapat memberi style (gaya) untuk paragraf atau tag <p> dengan warna merah dan dicetak miring.

p {color:red; font-style:italic;}

Dari sintaksis CSS di atas, antara property-name dan value dipisah oleh tanda titik dua (colon) dan setelah value diakhiri oleh titik koma (semicolon. Property-name dan value diletakkan di dalam kurung kurawal ({}). Sintaksis CSS mempunyai dua blok yaitu blok selector dan blok deklarasi. Blok deklarasi adalah kurung kurawal beserta dengan property dan value di dalamnya sebagaimana gambar di bawah ini.

Aturan penulisan atau sintaksis CSS

Selector CSS tidak hanya berupa elemen HTML namun bisa berupa pola (pattern) yang digunakan untuk menyeleksi elemen yang ingin diberi style atau gaya. Pola-pola dari selector CSS sebenarnya cukup banyak. Berikut ini beberapa contoh selector CSS:

1. Element Selector.

Element selector adalah tipe selector yang umum digunakan dan mungkin banyak ditemui ketika mengedit file CSS untuk merubah tampilan laman web. Sebagai contoh, Anda dapat memberi style pada paragraf yaitu elemen p atau tag <p> dengan warna merah dan rata tengah.

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

2. Universal Selector.

Universal selector (*) digunakan untuk menyeleksi semua elemen HTML. Sebagai contoh, Anda memberi warna latar (background) kuning pada semua elemen HTML.

* {background-color:yellow;}

3. Descendant Selector.

Descendant selector termasuk yang umum digunakan dan banyak ditemukan di file CSS. Selector descendant digunakan ketika Anda ingin memberi style (gaya) pada elemen tertentu yang ada di dalam elemen lainnya. Sebagai contoh, style berupa warna biru hanya berlaku untuk elemen em atau tag <em> jika elemen atau tag <em> berada di dalam elemen p atau tag <p>.

p em {color:blue;}

4. Grouping Selector.

Grouping selector umum ditemukan di file CSS. Grouping selector digunakan untuk memberi style (gaya) pada lebih dari satu elemen HTML. Anda cukup memisahkan elemen-elemen HTML yang akan diberi style sama dengan menggunakan tanda koma.

h1, h2, h3 {color:blue; font-weight:normal; text-transform:lowercase;}

5. class Selector.

class selector digunakan untuk menyeleksi elemen menggunakan atribut class spesifik. Untuk menyeleksi elemen HTML dengan class spesifik, gunakan tanda titik (.) diikuti nama class. Sebagai contoh, semua elemen HTML dengan class="bluecenter" diberi warna biru dan rata tengah.

.bluecenter {color:blue; text-align:center;}

6. id Selector.

id selector digunakan untuk menyeleksi elemen HTML menggunakan atribut id spesifik. Dalam satu laman web, id harus unik dan digunakan untuk menyeleksi satu elemen unik. Untuk menyeleksi elemen dengan id, gunakan tanda pagar (#) diikuti elemen. Sebagai cobtoh, elemen HTML dengan id="red" diberi warna merah.

#red {color:red;}
SUKAI DAN BAGIKAN ARTIKEL INI:
Pin It

MASUKKAN EMAIL ANDA UNTUK BERLANGGANAN ARTIKEL GRATIS:

Delivered by FeedBurner