Syntax CSS

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.

Format penulisan kalimat CSS:

selector { property: value }

elector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.


Contoh Syntax:

h1 { color: red }

Contoh di atas menunjukkan

Selector: h1

Property: color

Value: red


Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:

h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:

h1,h2,h3 {color:red; font-family:arial; font-size:150%;}

Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.

h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}


Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.

CSS Comment

Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.

Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.

/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}

1 komentar:

Irwanto mengatakan...

CSS komen saya dicek yaa... Gimana supaya bisa dipasangkan background gambar pada css chatt saya Xtgem http://panorama.yn.lt

#chatt_msg {border: 4px inset Beige;max-width:480px; margin: 4px auto; padding: 3px;text-align:down;background:#aaa} #chatt_msg div {border: 4px solid Beige; background: khaki; margin: 4px;padding: 4px; overflow: auto; text-align: extrabold;} #chatt_msg div b {border: 2px solid Beige;background: Darkkhaki; margin: 4px; padding: 3px;} #chatt_msg div b {border: 2px solid Beige;background: Darkkhaki; margin: 4px; padding: 3px;} #chatt_form {border: 4px inset Beige;max-width:480px; margin: 6px auto; padding: 3px;text-align:down;background:olive} #chatt_form label {border: 1px solid Beige;font-weight: extrabold} #chatt_form div {border: 3px solid Beige; background: khaki; margin: 4px;padding: 4px; overflow: auto; text-align: extrabold;} #chatt_form div b {border: 9px solid #bbb;background: white; margin: 4px; padding: 4px;} #chatt_form input[type="text"] {;function startTime();border: 4px solid Beige;body onload="startTime();background:white; margin: 4px auto;padding: 2px;background:khaki; display: block;align:down} #chatt_form input[type="submit"]:align=down; {border: 4px solid green; margin:4px;padding: 2px;background:greenyellow;} #chatt_form br {display:custom;}

Posting Komentar