Oops! Sepertinya ada sedikit kesalahan ...

CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration )

[You must be registered and logged in to see this image.]

• Selector adalah HTML element yang ingin dibuat style nya.
  
• Declaration merupakan isi dari property dan nilai dari CSS.
  
• Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )

Contoh CSS

Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :

Code:

.atlanta-test {color:red;text-align:center;}

CSS Coment

Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.

Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :

Code:

/* Ini komen kata-kata kita*/
.atlanta-test {
color:red;
/*Di dalam Selector juga bisa*/
text-align:center;
}

CSS ID dan Class


Selector ID digunakan untuk menentukan style untuk elemen tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = “atlanta1″

Code:

#atlanta1
{
text-align:center;
color:red;
}

nb: JANGAN memulai id dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox


Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen . Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class yang sama .

Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”

Pada contoh di bawah ini, semua elemen HTML dengan class = “atlanta”akan dibuat rata tengah :

Code:

.atlanta {text-align:center;}

kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.

Pada contoh di bawah, elemen p semua dengan class = “atlanta”akan di buat rata tengah :

Code:

p.atlanta {text-align:center;}

nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer.

[You must be registered and logged in to see this link.]