CSS atau cascading style sheet adalah bahasa scripting untuk memformat tampilan website secara keseluruhan. Tampilan disini berarti mengarah pada warna background, image, jenis dan ukuran huruf, posisi huruf atau elemen dan lain sebagainya.
CSS bisa dituliskan dengan tiga (3) cara yaitu
- langsung disisipkan didalam tag <head></head>. Untuk menyisipkan di dalam tag head harus diawali dengan tag <style type=?text/css?></style>
- menggunakan file external, artinya script css ditulis dalam file tersendiri dengan akhiran .css. dan sisipkan file ini di dalam tag <head> dengan cara seperti ini <head><link rel=”stylesheet” href=”css/style.css” type=”text/css” /></head>
- langsung pada tag yang bersangkutan, misalkan <div style=?bla-bla?></div>
CSS dituliskan dalam bentuk block-block script yang disebut dengan style , style itu konsepnya mirip dengan function. Style tersebut bisa dipakai sekali atau berkali-kali tergantung pada tanda didepan style tersebut. Yang patut diingat meski css adalah bahasa scripting, bukan berarti seperti bahasa pemorgraman. Berikut ini aturan penulisan CSS.
- menggunakan tanda # sebagai awalan style, contohnya
#style_ku{
background-color:blue;
}
tanda ini berarti untuk menggunakan style ini harus menggunkana atribut id, dan setiap tag pasti memiliki atribut id, misal <div id=?style_ku?>ini teks</div>. Sifat dari id adalah unik, tidak boleh ada elemen yang memiliki id yang sama, makanya style ini hanya bisa digunakan sekali. - menggunakan tanda dot (.) sebagai awalan style, contohnya
.style_ku{
background-color:blue;
}
tanda ini berarti untuk menggunakan style ini harus menggunakan atribut class, setiap tag pasti memiliki atribut class. Misalkan <div class=?style_ku?>das</div>. Sifat dari class adalah tidak unik, artinya dalam 1 dokumen HTML boleh memiliki lebih dari 1 class yang sama. Dengan menggunakan tag - tanpa tanda, tetapi langsung mengarah pada tag HTML, misalkan
div{
background-color:blue;
}
artinya semua tag div akan dikenai style tersebut - turunan, baik # maupun dot (.) bisa menurunkan style. Style anak juga akan memiliki style dari induk.
Contohnya
#induk .anak{
background-color:red;
}
cara menggunakannya
<div id=?induk?>
<div class=?anak?>bimoweb.com/ belajar web</div>
</div>
artinya class anak adalah turunan dari id induk. Jika id induk dihilangkan, maka class anak tidak akan bekerja.
Penggunaan tanda # atau dot(.) tergatung pada kasus yang dihadapi, dan sangat bervariasi.
Demikianlah sedikit mengenai dasar-dasar CSS. Semoga bermanfaat bagi semuanya.
my notes 