Menggunakan CSS
Saat ini CSS sangat banyak banyak digunakan dalam berbagai jenis website dinamis maupun statis. Keberadaan CSS ini benar-benar sangat membantu dalam hal desain tampilan dan layout website. Akibatnya keberadaan code CSS pun terus diperbaharui hingga sekarang lahirlah apa yang disebut dengan CSS3 (akan dibahas nanti)..
Untuk menggunakan styles sheet CSS dapat dilakukan dengan beberapa cara.
- Inline Style (di dalam elemen HTML)
- Internal Style Sheet (di dalam tag <head>)
- External Style Sheet (di dalam dokumen CSS, terpisah)
- Browser Default
Inline Style (di dalam elemen HTML)
Dengan meggunakan inline style anda dapat membuat dynamic style tanpa harus menambahkan script ke web anda. Inline styles merupakan style yang bisa kita pasang pada element web atah tag HTML tertentu saja. Untuk mendeklarasikannya cukup menambahkan atribut attribute style kemudian langsung diberi nilai propertinya.
Contoh :
<H1>ZEFNET</H1>
<P>ZEFNET adalah sebuah web Developer dan <b style="color: ref; font-family: arial;">Linux Center</b>
Pada browser akan tampil seperti berikut
ZEFNET
ZEFNET adalah sebuah web Developer dan Linux Center
Secara keseluruhan, penggunaan CSS secara inline ini relatif merepotkan karena harus mendeklarasikan elemen satu per satu sehingga source code akan menjadi lebih panjang. Tapi dengan deklrasai seperti ini perubahan gaya atau style akan lebih objektif karena langsung mengenai sasaran objek yang kita maksud. Singkatnya inline style ini kita gunakan tidak untuk pola utama pebangun layout, tapi mungkin akan efektif untuk menambah variasi seperti format teks pada bagian2 tertentu saja atau merubah gaya objek yang tlah terdefinisi stylenya.
Internal Style Sheet atau Embedded Stylesheet (di dalam tag <head>)
Sama seperti Inline Style, penulisannya dituliskan di dalam dokumen html itu sendiri namun pendefinisiannya diletakkan diantara tag <head> dan </head> dengan menambahkan tag <style> dan </style>. Dengan inline stylesheet atribut yang diubah propertinya akan digunakan di seluruh halaman web yang terdeklarasi dengan tag style. Untuk mempertegas bahwa yang Anda deklarasikan ini adalah sebuah style sheet, dapat ditambahkan atribut type="text/css", sehingga script kita menjadi:
... kumpulan rules (selector dan deklarasi) ...
</style>
Contoh:
<HTML>
<HEAD>
<style>
p{
color: blue;
}
li{
font-family: Tahoma;
color: red;
}
</style>
</HEAD>
<BODY>
<p>Facebook memiliki sejumlah fitur interaksi antar sesama pengguna yang di antaranya adalah fitur:
<ul>
<li>Wall/Dinding, ruang tempat sesama pengguna mengirimkan pesan-pesan terbuka</li>
<li>Poke/Colek, sarana untuk saling mencolek secara virtual,</li>
<li>Photos/Foto ruang untuk memasang foto, dan</li>
<li>Status yang menampilkan kondisi/ide terkini pengguna</li>
<p>Mulai Juli 2007, Facebook mengizinkan pengguna untuk mengirim berbagai lampiran (tautan, aplikasi, dsb) langsung ke Wall/Dinding, di mana sebelumnya yang diizinkan hanya teks saja.
</BODY>
</HTML>
Maka akan tampak seperti ini pada browser
Facebook memiliki sejumlah fitur interaksi antar sesama pengguna yang di antaranya adalah fitur:
- Wall/Dinding, ruang tempat sesama pengguna mengirimkan pesan-pesan terbuka
- Poke/Colek, sarana untuk saling mencolek secara virtual,
- Photos/Foto ruang untuk memasang foto, dan
- Status yang menampilkan kondisi/ide terkini pengguna
Mulai Juli 2007, Facebook mengizinkan pengguna untuk mengirim berbagai lampiran (tautan, aplikasi, dsb) langsung ke Wall/Dinding, di mana sebelumnya yang diizinkan hanya teks saja.
Dengan mengunakan metode internal stylesheet ini dipastikan bahwa kita telah memisahkan antara dokumen web dengan style sheet atau blok kode CSS, dan untuk mengubahnya tidak perlu cape, cukup mencarinya di blok <style> yang terletak pada blok <head>. Cara ini umum digunakan untuk membuat website statis maupun dinamis, tapi saya pribadi menggunakan cara ini pada saat mebuat website pada desain mentahnya yang kalo sudah selesai biasanya saya memisahkannya lagi kedalam bentuk file css external.
Eksternal Style Sheet
Apabila anda menginginkan style yang sama untuk halaman HTML anda yang lain (lebih dari satu halaman web), disarankan mempergunakan sheet-sheet terpisah namun satu dan lainnya terhubung dengan cara link. CSS dapat didefinisikan untuk semua halaman hanya dengan menulis definisi CSS di dalam sebuah file teks yang selanjutnya dirujuk oleh setiap halaman web yang akan menggunakannya. Dengan demikian jika suatu saat ingin dilakukan perubahan style yang berlaku untuk semua halaman Web maka yang diubah ada file teks eksternal tersebut. Untuk menggunakannya Anda dapat mengikuti cara berikut ini :
Keterangan link: untuk mendeklarasikan bahwa elemen tersebut adalah sebuah link atau rujukan atau penghubung halaman rel: atau relation dideklaraskan dengan jenis rujukan, isi dengan "stylesheet" karena rujukan kita adalah sebuah file CSS agar supaya browser dapat menemukan perintah href sebagai sebuah rujukan CSS type: menegaskan jenis dari rujukan (tidak diisi juga gak masah tapi lebih baik diisi) href: atau hyperlink reference adalah alamat atau lokasi sumber rujukan file CSS yang kita buat
Perlu diperhatikan bahwa file CSS ini dapat dibuat pada aplikasi text editor seperti Notepad, Notepad++, Dreamwaver, dll yang nantinya disimpan dengan ekstensi .css. Untuk penamaan file adalah bebas, tapi saya pribadi lebih menyarankan menggunakan nama "style" daripada yang lain untuk memastikan bahwa file ini adalah file deklarasi CSS.
Sebagai bahan praktek kita lihat pada contoh berikut:
File styles.css
a { text-decoration: none }
a:hover { text-decoration: underline; color: red; background-color: #ccffcc }
li em { color: red; font-weight: bold; background-color: #ffffff }
ul { margin-left: 2cm }
ul ul { text-decoration: underline; margin-left: .5cm }
File test.html
<HTML>
<head>
<title>Linking External Style Sheets</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Menu belanja<em>hari ini</em>:</h1>
<ul>
<li>Susu</li>
<li>Roti
<ul>
<li>Roti tawar</li>
<li>Roti cokelat</li>
<li>Roti susu</li>
</ul></li>
<li>Beras</li>
<li>Kentang</li>
<li>Sayuran <em>hijau segar</em></li>
</ul>
</body>
</html>
Komentar dalam CSS
Comments atau komentar biasanya di gunakan oleh programmer untuk memudahkan mengingat kembali script yang sudah di tulisnya. Dalam pasangan tag <STYLE> dan </STYLE>, dapat memberikan suatu komentar yang membuat browser tidak memproses bagian dalam komentar tersebut. Cara penulisan komentar dalam CSS ditulis diantara tanda /* dan */.
Contoh:
H1{color: blue;} /*elemen h1 akan menjadi biru*/
a:hover{ color: blue; font-weight: bold;} /* elemen anchor (link) akan menjadi biru dan tebal ketika pointer atau cursor diarahkan tepat di atas sebuah link*/