Cascading Stylesheet (CSS) adalah
sebuah program dengan
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. Sebelum membahas
mengenai CSS, ada baiknya kita
mengetahui sekilas tentang
HTML.
Pengenalan XHTML
XHTML adalah cara penulisan
perintah-perintah untuk
menghasilkan tampilan halaman
website. Halaman XHTML
memiliki struktur seperti contoh
berikut:
<!DOCTYPE html PUBLIC “-//
W3C//DTD XHTML 1.0
Transitional//EN”>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
</body>
</html>
Isi dari halaman website
dituliskan pada bagian antara
<body> dan </body>.
Sedangkan bagian <head>
sampai dengan </head>
digunakan untuk menyisipkan
perintah (tag) lainnya seperti
memanggil file javascript,
mendeklarasikan kata kunci
(keywords) dan menuliskan
keterangan tentang halaman
website (description). Perintah
untuk memanggil file CSS juga
ditempatkan pada bagian ini.
Sedangkan kode-kode yang
biasa digunakan untuk
menuliskan isi dari halaman
website adalah seperti contoh
berikut:
<p> … </p>
Untuk menempatkan teks yang
berupa paragraf.
<h1> … </h1>, <h2> … </h2>,
<h3> … </h3>
Untuk menuliskan judul dari
kelompok paragraf.
<div> … </div>
Disebut sebagai layer yang
berfungsi untuk
mengelompokkan beberapa
paragraf.
Berikut adalah contoh penulisan
halaman XHTML:
<!DOCTYPE html PUBLIC “-//
W3C//DTD XHTML 1.0
Transitional//EN”>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<div>
<h1>Contoh Halaman Website</
h1>
<p>
Ini adalah isi paragraf
dari contoh halaman website
</p>
</div>
</body>
</html>
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:
<!DOCTYPE html PUBLIC “-//
W3C//DTD XHTML 1.0
Transitional//EN”>
<html>
<head>
<title>Judul Halaman</title>
<!– Baris yang ditambahkan –>
<link rel=”stylesheet”
href=”[URL]” type=”text/css”
media=”screen” />
<!– Akhir dari baris yang
ditambahkan –>
</head>
<body>
<div>
<h1>Contoh Halaman Website</
h1>
<p>
Ini adalah isi paragraf
dari contoh halaman website
</p>
</div>
</body>
</html>
[URL] = Alamat URL tempat file
CSS tersebut disimpan
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; }
Kode ini tidak merubah semua
tag <h1> … </h1>, namun akan
merubah semua tag yang
memiliki nama class yang sama
seperti misalnya:
<div> … </div>
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-kode CSS yang lebih
lengkap dapat Anda pelajari dari
file yang dapat Anda unduh dari
sini.
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.
Class dan ID dalam CSS
Untuk memudahkan, berikut
adalah penjelasan secara umum
tentang penggunaan class dan
ID dalam CSS dan XHTML.
ID juga dapat digunakan untuk
menamai tag sebagai
identifikasi pada javascript.
ID bersifat unik pada setiap
halaman, tidak boleh lebih dari
satu tag memiliki id yang sama
pada satu halaman yang sama.
Class dapat digunakan berulang
kali, satu tag dapat memiliki class
lebih dari satu seperti misal:
<h1>Contoh Halaman Website</
h1>
dimana judul, besar dan kanan
memiliki style yang saling
melengkapi.
ID biasanya bersifat global yang
dibedakan menjadi blok-blok
tertentu misalkan, header,
content, sidebar dan footer.
Class biasanya digunakan untuk
membedakan style tertentu
yang dibedakan antara misalnya
warna, jenis huruf atau besar
huruf.
Class dapat digunakan untuk
mempertegas style dari ID yang
bersifat global dengan
menggunakannya bersama-
sama pada satu tag seperti
misal:
<h1 id=”pagetitle”>Contoh
Halaman Website</h1>
