CSS Syntax

Standard

Syntax bisa diartikan sebagai bentuk kode. Jadi Syntax CSS bisa berarti bentuk kode CSS. Kode CSS berbeda dengan kode HTML. Kode CSS tidaklah sulit.

Contoh syntax CSS. Image from photobucket

Contoh syntax CSS. Image from photobucket

Kode CSS hanya dibagi menjadi 3 bagian, yaitu selector, property, dan value.

selector {
    property : value;
}

Selector adalah elemen HTML yang akan diberikan style. Property adalah atribut dari suatu elemen HTML yang ingin anda tentukan stylenya, sedangkan Value adalah nilai dari atribut tersebut. Untuk memberikan gambaran yang lebih jelas, berikut contoh kodenya:

body {
    background-color:#cccccc;
    font-family: "Calibri", Verdana, Tahoma;
}

Kode CSS diatas bisa berarti elemen body (tag <body>) akan ditampilkan dengan warna background abu-abu (#cccccc adalah kode warna untuk abu-abu), dan pada perintah berikutnya kita menentukan agar elemen body menggunakan font Calibri. Jika font Calibri tidak ada pada komputer user, maka gunakan font Verdana, begitu seterusnya. Penulisan font Calibri menggunakan petik dua adalah karena font Calibri bukan merupakan font standart dalam CSS. Font yang tidak standart dalam CSS sebaiknya diberi tanda petik dua. Font yang namanya terdiri lebih dari satu kata juga harus diberikan tanda petik, misal “Times New Roman”.

Inheritance/Pewarisan

Maksud dari Interitance pada CSS adalah begitu kita memberikan style pada elemen body, maka elemen yang didalamnya akan mengikuti style dari elemen body kecuali elemen tersebut diberi style tertentu.

Misalnya saja ada file html seperti berikut :

<html>
<head>
<title>Latihan syntax CSS</title>
<style type="text/css">
    body {
        background-color:#cccccc;
        font-family: "Calibri", Verdana, Tahoma;
    }
</style><head>
<body>
    <h1>Halo apa kabar</h1>
    <p>paragraf halo apa kabar</p>
</body>
</html>

Dari contoh kode diatas, kita memberikan style pada elemen body (tag <body>). Dengan begini, maka tag-tag HTML yang ada diantara <body> dan </body> (tag <h1> dan tag <p>) akan mengikuti style <body>, yaitu memiliki warna latar abu-abu dan menggunakan font Calibri. Agar heading (tag h1) memiliki style yang berbeda, misalnya saja heading menggunakan font Times New Roman, maka harus dibuatkan style lagi khusus untuk heading. Berikut contoh kodenya:

<html>
<head>
<title>Latihan syntax CSS</title>
<style type="text/css">
    body {
        background-color:#cccccc;
        font-family: "Calibri", Verdana, Tahoma;
    }
    h1 {
        font-family: "Times New Roman";
    }
</style><head>
<body>
    <h1>Halo apa kabar</h1>
    <p>paragraf halo apa kabar</p>
</body>
</html>

Pada contoh diatas, ditambahkan style baru untuk elemen heading 1. Dengan begini, heading akan memiliki font Times New Roman, tidak lagi mengikuti style dari elemen induxnya (body).

Walaupun begitu, ada beberapa property pada CSS yang tidak akan di-warisi oleh elemen didalamnya, misalnya saja property margin seperti pada kode dibawah:

body {margin:20px}

Misalnya kita menambahkan property margin pada style body, maka heading 1 dan paragraf tidak akan memiliki margin sebanyak 20px, hanya elemen body saja.

Kombinasi Selector

Untuk menghindari pengetikan ulang style CSS, elemen HTML yang memiliki style yang sama bisa menggunakan selector yang sama dengan cara menambahkan nama elemen dan dipisahkan dengan tanda koma, contohnya :

h1, h2, h3, h4, h5, h6 {
     color: #009900;
     font-family: Georgia, sans-serif;
}

Pada contoh diatas, heading 1, heading 2, sampai heading 6 diset menggunakan style yang sama.

Memberikan Komentar pada CSS

Untuk memberikan komentar pada kode CSS, dimulai dengan tanda /* dan diakhiri dengan tanda */. Contohnya saja:

/* Ini adalah komentar */

Komentar pada CSS tidak akan diproses oleh browser. Komentar berguna untuk mengetikkan sesuatu pada file CSS tapi Anda tidak ingin teks tersebut diproses.

Seperti halnya mempelajari HTML, mempelajari CSS juga bukan merupakan hal yang sulit. HTML dan CSS bukan bahasa pemrograman karena tidak terdapat percabangan (if … else … then) ataupun perulangan ( for, while, do), jadi CSS bukan sesuatu yang sulit untuk dipelajari, hanya perlu banyak latihan. Jika Anda belum terlalu jelas apa itu CS, silahkan lihat Pengenalan CSS.

sumber: CSS Basic, W3Schools

9 thoughts on “CSS Syntax

  1. css-nya mungkin bener ngga susah, tp kompatibilitas perambannya itu yg ngeselin, terutama di IE 🙁
    saya blm membenahi css blog saya utk IE

    sempat-2nya Permana, dkk. bikin situs ini, lanjut dah.. 🙂

  2. Pingback: CSS « Cute^.^Jin
  3. Hati hati bikin CSS, mesti di coba dulu CSS anda di IE. Saya menemukan banyak perbedaan ketika buka dengan IE dan dengan FF. Tapi browser yang lain seperti Chrome, Opera, Safari gak bakal berbeda.

    • Kalau IE memang berbeda cara menterjemahkan kode CSS. Kalau Chrome dan Safari pasti sama karena memakai engine browser yang sama, yaitu WebKit. Kalau Opera kurang tahu pakai engine apa. Kalau saya develop web, testing pertama di Firefox

Leave a Reply

Your email address will not be published. Required fields are marked *