(CSS) adalah mekanisme sederhana untuk mengubah Jenis Huruf, Warna, Ukuran dan lain-lain pada halaman website. Dengan menggunakan CSS, pengaturan tampilan halaman web dapat diorganisasikan dalam satu file sehingga memudahkan untuk mengubah atau memperbaiki tampilan halaman website tersebut tanpa harus mengubah satu per satu setiap halaman yang berkaitan dalam sebuah website.
Penggunaan CSS
CSS dapat dibuat hanya dengan menggunakan Notepad atau text editor sederhana lainnya dan disimpan dengan ekstensi .css. Agar halaman website dapat membaca file CSS tersebut maka perlu ditambahkan baris kode tertentu pada bagian <head></head> halaman website tersebut seperti contoh di bawah ini:
Penulisan kode CSS
Kode CSS disebut dengan style. Penulisan kode CSS dalam sebuah file CSS adalah dengan format sebagai berikut
tag { property: value; }
tag = tag XHTML, atau nama layer dimana style tersebut berfungsi.
property = Detail yang tampilannya diubah dengan style tersebut.
value = Nilai dari properti di atas.
Sebagai contoh, untuk mengubah format tampilah dari sebuah judul artikel (header) yang memiliki kode <h1>Contoh Halaman Website</h1> menjadi bergaris bawah, berwarna biru dan berukuran 28 pixel, maka dalam file CSS dapat ditulis:
h1 { text-decoration: underline, color: blue; font-size: 28px; }
Hal tersebut akan menimbulkan efek yang sama untuk setiap kali kode <h1> ... </h1> digunakan dalam halaman XHTML.
Cara penulisan lainnya adalah dengan mendefinisikan style berdasarkan class atau ID layer. Untuk cara ini, maka kode XHTML harus mendefinisikan nama class atau identitas layer yang digunakan seperti pada contoh berikut:
- Header dengan class bernama “judul”
Pada halaman XHTML ditulis:
<h1>Contoh Halaman Website</h1>
Pada file CSS didefinisikan:
.judul { text-decoration: underline, color: blue; font-size: 28px; } - Header dengan ID bernama “judul”
Pada halaman XHTML ditulis:
<h1>Contoh Halaman Website</h1>
Pada file CSS didefinisikan:
#judul { text-decoration: underline, color: blue; font-size: 28px; }
Kode ini juga memiliki pengaruh yang sama dengan penggunaan berdasarkan class.
Kode ini tidak merubah semua tag <h1> ... </h1>, namun akan merubah semua tag yang memiliki nama class yang sama seperti misalnya:
<div> ... </div>
Hal utama yang perlu diperhatikan adalah bahwa penulisan style dalam CSS harus berurutan dan diperhatikan agar jangan sampai tumpang tindih. Untuk lebih jelasnya, perhatikan contoh berikut:
Pada CSS tertulis:
h1 { text-decoration: underline, color: blue; font-size: 28px; }
#pagetitle { font-size: 12px; }
Pada halaman website tertulis:
<h1 id="pagetitle">Contoh Halaman Website</h1>
Maka yang terjadi adalah, pada tampilan website besar tulisan “Contoh Halaman Website” adalah hanya 12 pixel, bukan 28 pixel karena ID untuk tag h1 yaitu #pagetitle dituliskan paling akhir.
http://preaxz.com/2009/05/tutorial-css/
