Apa itu CSS ?
Cascading Style Sheet apalagi ini?. Mungkin sebagai orang awam anda tentu belum mengenal
apa itu CSS. Cascading Style Sheet adalah suatu teknologi yang digunakan untuk
mempermudah pembuatan suatu tampilan sebuah website.
Jangan mengernyitkan dahi, anggap saja ini mudah. Dengan menggunakan CSS kita dapat
mempercepat pembuatan situs sekaligus mempermudah kita dalam proses mengeditnya.
Pada bab 5 ini kita akan mencoba menerapkan penggunaan CSS dalam beberapa contoh yang
sederhana. Selanjutnya kita akan merubah format tampilan personal homepage yang telah
kita buat pada bab 3 dengan menambahkan CSS kedalamnya.
Mengaplikasikan CSS
PERSIAPAN
Seperti biasa sebelum memulai proyek kita. Buatlah sebuah folder baru di direktori C:\HTML
dan berilah nama Bab 5. Semua file HTML yang kita kerjakan pada bab 5 akan kita simpan di
folder ini.
Kebanyakan memori diotak kita akan menyimpan lebih baik jika suatu hal itu pernah kita
lakukan. Untuk itu daripada banyak berteori langsung saja kita mempraktekkan penggunaan
CSS. Rupanya ada spesialis otak disini!.
HTML_1.html vs. CSS_1.html
Wah..., kok seperti pertarungan saja!. Maksud dari kalimat diatas adalah nanti kita akan
membuat 2 buah file yang mempunyai output tampilan yang sama. Tetapi yang satu
menggunakan mode HTML saja sedangkan yang satunya ditambahkan CSS didalamnya.
OK, sekarang mari kita buat file yang pertama yaitu HTML_1.html. Jalankan PHP DESIGNER
2006 klik menu File-New-HTML/XHTML. Selanjutnya ketik kode dibawah ini.
<html>
<head>
<title>Mode HTML saja</title>
</head>
<body bgcolor="#D7E7F3">
<font face="verdana" size=”2”>
<p>Saya hanyalah sebuah situs tanpa adanya <b><font color="red">Cascading Style
Sheet(CSS)</font></b></p>
<p>Oleh karena saya merasa tubuh saya kurang efesien tanpa adanya <b><font
color="red">Cascading Style Sheet(CSS)</font></b></p>
<p>Saya harap pencipta saya menambahkan <b><font color="red">Cascading Style
Sheet(CSS)</font></b> pada tubuh saya.</p>
</font>
</body>
</html>
Simpan kode diatas dengan nama html_1.html. Lalu jalankan pada browser. Selanjutnya
buatlah file baru dan ketik kode dibawah ini.
<html>
<head>
<title>Mode HTML dan CSS</title>
<style type="text/css">
body{background-color: #D7E7F3; font-family: verdana; font-size: 12px}
b{color: red}
</style>
</head>
<body>
<p>Saya hanyalah sebuah situs tanpa adanya <b>Cascading Style Sheet(CSS)</b>
<p>Oleh karena saya merasa tubuh saya kurang efesien tanpa adanya <b>Casscading
Style Sheet(CSS)</b></p>
<p>Saya harap pencipta saya menambahkan <b>Casscading Style Sheet</b> pada tubuh
saya.</p>
</body>
</html>
Simpan kode diatas dengan nama css_1.html, lalu jalankan pada browser. Bagaimana
hasilnya? Sama persis bukan? Itulah yang dimaksud dengan CSS. CSS biasanya diletakkan
didalam tag <head></head>.
Lihat gambar 5.0. untuk melihat tampilan output kedua file.
Gambar 5.0: file output html_1.html dan css_1.html
Setiap tag dari HTML seperti <b>,<i>,<u> dan sebagainya dapat digunakan dalam CSS.
Didalam CSS tag-tag HTML disebut sebagai selector dan atribut didalamnya adalah
declaration. Declaration ditandai dengan tanda {...} (kurung kurawal).
Berbeda dengan atribut dalam HTML yang isinya dihubungkan dengan tanda “=”. Isi atribut
dari CSS dihubungkan dengan tanda “:” (titik dua). Sedangkan pembatas antara satu atribut
dengan atribut yang lainnya adalah tanda “;” (titik koma).
Dari sekilas kode sederhana diatas dapat digambarkan betapa bermanfaatnya CSS dalam
menghemat waktu kita dalam mendesain. Jika suatu waktu kita ingin mengganti warna suatu
kalimat yang warnanya sama. Kita tidak perlu susah payah mengeditnya satu per satu. Namun
cukup edit bagian CSS nya maka seluruh bagian itu akan berubah warnanya. Menarik bukan?.
Atribut dari tag HTML dan CSS sedikit memiliki perbedaan. Seperti atribut untuk jenis huruf jika
di HTML namanya face pada CSS namanya family. Jadi jangan keliru keliru untuk menuliskan
atributnya.
Bersambung
sumber:rahasia-webmaster.com/