/* komentar terletak diantara sepasang tanda garis miring dan bintang,
persis seperti larik ini! */
/* ####################
## SELEKTOR
####################*/
/* Secara garis besar, statemen utama dalam CSS sangat sederhana */
selektor { properti: nilai; /* properti lainnya */ }
/* selektor berfungsi untuk memilih suatu elemen dalam sebuah laman.
Kita juga bisa memilih semua elemen di sebuah halaman! */
* { color:red; }
/*
Dengan menentukan sebuah elemen seperti ini pada sebuah laman:
*/
/* kita bisa memilih elemen berdasarkan nama class-nya */
.suatu-class { }
/*atau dengan dua class sekaligus! */
.suatu-class.class2 { }
/* atau dengan nama tag-nya */
div { }
/* atau id-nya */
#suatuId { }
/* atau - jika ada - dengan attribute-nya! */
[attr] { font-size:smaller; }
/* atau jika attribute tersebut memiliki nilai spesifik */
[attr='nilai'] { font-size:smaller; }
/* dibuka dengan sebuah nilai*/
[attr^='nil'] { font-size:smaller; }
/* atau ditutup dengan nilai */
[attr$='ai'] { font-size:smaller; }
/* atau bahkan disisipi nilai */
[attr~='la'] { font-size:smaller; }
/* dan yang lebih penting lagi, kita bisa mengombinasikannya sekaligus
dengan syarat tidak ada spasi diantara selektor-selektor. sebab adanya spasi
akan membuat selektor itu memiliki makna yang berbeda.*/
div.suatu-class[attr$='ai'] { }
/* kita juga bisa memilih sebuah elemen berdasarkan posisi elemen induknya.*/
/*sebuah elemen yang merupakan anak langsung dari elemen induk (diseleksi dng
cara yang sama) */
div.suatu-induk > .-suatu-class {}
/* atau salah satu induk elemennya dalam hirarki elemen */
/* berikut ini dimaksudkan pada elemen manapun dengan class "class-entah" dan
merupakan anak elemen dari suatu div dengan class "induk-entah" PADA LEVEL
HIRARKI MANAPUN */
div.suatu-induk .suatu-class {}
/* peringatan: selektor yang sama jika tanpa ada spasi akan bermakna lain.
misalnya? */
div.suatu-induk.suatu-class {}
/* kita juga bisa memilih sebuah elemen berdasarkan saudara elemen yang muncul
tepat sebelumnya */
.aku-muncul-tepat-sebelum + .elemen-ini { }
/*atau saudara elemen manapun yang pernah muncul selang beberapa elemen
sebelumnya */
.aku-pernah-muncul-sebelum ~ .elemen-ini {}
/* Ada beberapa pseudo-class yang memampukan kita memilih suatu elemen
berdasarkan perilaku lamannya (bukan struktur lamannya) */
/* semisal ketika sebuah elemen ditimpa hover (pointer mouse) */
:hover {}
/* atau link yang sudah pernah diklik*/
:visited {}
/* atau link yang belum pernah diklik*/
:link {}
/* atau elemen input yang menjadi fokus */
:focus {}
/* ####################
## PROPERTI
####################*/
selektor {
/* Unit */
width: 50%; /* dalam persen */
font-size: 2em; /* angka kali jumlah font-size saat ini */
width: 200px; /* dalam pixel */
font-size: 20pt; /* dalam point */
width: 5cm; /* dalam centimeter */
width: 50mm; /* dalam milimeter */
width: 5in; /* dalam inci */
/* Warna */
background-color: #F6E; /* dalam short hex */
background-color: #F262E2; /* dalam format long hex */
background-color: tomato; /* warna yang sudah punya konvensi nama */
background-color: rgb(255, 255, 255); /* dalam rgb */
background-color: rgb(10%, 20%, 50%); /* dalam persen rgb */
background-color: rgba(255, 0, 0, 0.3); /* dalam rgb semi-transparan*/
/* Gambar */
background-image: url(/folder-gambar/image.jpg);
/* Font */
font-family: Arial;
font-family: "Courier New"; /* jika nama font memiliki spasi,
ia diketik dalam tanda petik ganda */
font-family: "Courier New", Trebuchet, Arial; /* jika font pertama tidak
ditemukan, peramban menggunakan font berikutnya,
demikian secara berturut-turut */
}
/*A*/
p.class1[attr='nilai']
/*B*/
p.class1 {}
/*C*/
p.class2 {}
/*D*/
p {}
/*E*/
p { properti: nilai !important; }