Dasar CSS Scripting

February 12, 2008 at 9:26 am

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 sebaganya, kalau dulu kita menggunankan atribut font pada tag p (<p font=?tahoma?></p>) maka sekarang lebih baik menggunakan CSS.
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>

ada aturan dalam penulisan CSS, khusus yang masih awam dengan CSS, artikel dibawah ini bisa dijadikan referensi. CSS dituliskan dalam bentuk block-block script yang disebut dengan style. Jika anda pernah belajar tentang function, atau baca disini, style itu konsepnya mirip dengan function. Style tersebut bisa dipakai sekali atau berkali-kali tergantung pada tanda didepan style tersebut (saya tidak tahu apa menyebutkannya, tetapi saya akan memberi contoh). Yang patut diingat meski css adalah bahasa scripting, bukan berarti seperti bahasa pemorgraman. Sepanjang artikel ini ditulis, dalam css tidak ada parameter yang menandakan bahasa pemrograman seperti adanya struktur kondisional (if then else), perulangan dan variable. Tidak tahu jika W3C mengeluarkan standar baru. Meski begitu CSS bisa di akses oleh bahasa pemrograman, misalkan javascript, PHP dll. 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. Awalnya binggung cara menggunakanya, kayaknya sama saja sih, tetapi jika anda sering menggunakannya, ada saat yang tepat apakah anda akan menggunakan tanda # atau dot(.) atau malah turunan.

Yang pasti CSS tidak akan cepat ditinggalkan, karena CSS 2.0 sudah digodok oleh W3C, menunggu release resmi saja. Dan browser-browser update terbaru juga sudah mempersiapkan untuk merender scripting ini.

Silahkan tinggalkan komentar atau pertanyaan anda terhadap artikel ini atau pada saya. Saya akan jawab.

Pihak Terkait

Menyamakan Desain Web Antar Browser

Filed under: CSS, Tutorial

Iklan Premium

Jual Cincin Perak
Cincin yang sangat indah ini cocok untuk dipakai oleh pasangan suami istri atau pasangan yang baru tunangan
Harga Rp350.000
Beli Sekarang.

12 Responses to “Dasar CSS Scripting”

bungcip, on February 14th, 2008 at 4:57 am Said:

mas boleh tanya nggak? Saya masih belajar CSS untuk membuat blog saya.
Tetapi tampilan di IE dan Firefox berbeda. Di Firefox tampilan sudah OK tapi di IE halaman blog saya tampil acak-acakan.
Sekarang udah aku utak-atik CSS-nya sehingga tampilan di IE tidak begitu rusak tapi masih ada beberapa elemen yang letaknya masih salah.

Ada saran?

[Reply]
Bimo Hery Prabowo, on February 14th, 2008 at 10:37 am Said:

untuk masalah desain web dengan CSS, usahakan selalu menggunakan standar XHTML, jika desainnya sudah sesuai dengan XHTML, maka di browser manapun tampilannya akan sama. template wordpress biasanya sudah memenuhi standar XHTML yang level paling ketat

[Reply]
Anggie Bratadinata, on February 16th, 2008 at 2:45 am Said:

perbedaan tampilan layout CSS di IE dan Firefox ( dan browser2 lain ) disebabkan oleh perbedaan “CSS rendering model” masing-masing browser. Beberapa browser memiliki rendering model yang sesuai dengan web-standards, tapi sebagian lainnya tidak.

Kode XHTML boleh sama, CSS boleh sama, tapi masing2 browser akan menampilkannya dengan cara mereka sendiri. Contoh paling sederhana adalah “Box Model” di IE yang berbeda dengan box model browser berbasis Gecko.

Belum lagi CSS bug yang pasti dimiliki oleh setiap browser, bahkan browser yang lulus ACID test sekalipun, misalnya Opera 9 dan Safari.

Info lebih lanjut tentang perbedaan rendering model beberapa browser bisa dilihat di http://www.positioniseverything.net

Salam

[Reply]
Snap, on March 3rd, 2008 at 1:38 pm Said:

mumet dg css

[Reply]
Snap, on March 3rd, 2008 at 1:40 pm Said:

denger css dah nyerah duluan dech…

[Reply]
Bimo Hery Prabowo, on March 27th, 2008 at 5:31 pm Said:

ok mas

[Reply]
june (web design), on July 15th, 2008 at 3:22 am Said:

gileee gw tuh klo tiap nge design web musti bikin css IE6, IE7, OPERA, MOZ, SAFARi, klo yg lainnya sih oke2 aja .. nah pas giliran IE itu lo 22nya DAMN!! BIKIN GW suka BT..bisa 2minggu tuh gw mumet cuma buat mikirin position aja,klo gw dah ky mo nuntut microsoft ah suruh nge ganti IE …hehehehe.. GANBATE!

[Reply]
mrpolo, on December 19th, 2008 at 11:09 pm Said:

misi mas,

logika untuk pemrograman web sejenis blog bagaimana, tahapan2 apa yg hrs dipelajari dolo?

web design > php > xml >…..ato gmn , maap nuwbie minta pencerahanya.

trimakasih sebelunya.

[Reply]
Bimo Hery Prabowo, on December 20th, 2008 at 3:57 am Said:

kalau menurut saya, belajar dulu html, xhtml,css terus ke scripting kayak php, asp dsb

[Reply]
wulan, on December 23rd, 2008 at 11:13 pm Said:

ribet ya…fiuhh

[Reply]
Bimo Hery Prabowo, on December 24th, 2008 at 6:39 am Said:

eeee…. wulan juga ngasih komen ni… thx ya

[Reply]
aryadi, on March 27th, 2010 at 12:05 pm Said:

slam kenal saya aryadi saya baru mulai belajar teknik dasar css mohon minta bimbingannya, buat infonya makasih ya

[Reply]

Bimo Hery Prabowo