Pengenalan CSS
Sebelum Anda dapat menguasai
CSS, tentunya Anda harus memahami terlebih dahulu
pengertian dari
CSS itu sendiri. Anda akan mengetahui
sejarah
singkat lahirnya CSS, kegunaannya, dan cara penggunaannya.
A. Sejarah Singkat CSS
Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai bahasa pemrograman standard dalam
pembuatan dokumen web.
Tujuannya
adalah mengurangi pembuatan TAG-TAG baru
oleh
Netscape dan Internet
Explorer
(IE), karena pada masa itu kedua browser saling
bersaing
mengembangkan
TAG sendiri untuk mengatur tampilan web.
CSS level
1 mendukung pengaturan tampilan dalam hal:
1. Font (jenis,
ketebalan),
2. Warna teks, latar belakang, dan
elemen lainnya,
3. Text attributes,
misalnya spasi
antar baris,
kata,
dan
huruf,
4. Posisi
text, gambar,
tabel, dan elemen
lainnya,
5. Marjin, border,
dan padding.
Selanjutnya di
tahun 1998, W3C
menyempurnakan CSS awal dengan menciptakan
standard CSS2 (CSS level 2)
– yang
menjadi
standard hingga saat ini. Pada CSS level 2
ini, di masukkan semua atribut dari
CSS1, serta diperluas dengan penekanan pada
International accesibility and capability khususnya media-specific CSS.
Bahkan
pada perkembangannya, saat
ini sudah muncul CSS3. Pekerjaan
dari CSS3 dimulai pada tahun
2000, tidak lama setelah CSS2 di
implementasikan. CSS3 ini
sampai
sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.
B. Pengertian & Manfaat CSS
Menurut Wikipedia,
Cascading Style Sheets (CSS) adalah:
“bahasa pemrograman
untuk mengatur tampilan suatu website atau blog” Tampilan yang dimaksud disini adalah jenis, ukuran,
dan
warna font;
jarak antara
baris dan panjangnya, marjin
dan
indentasi, background dan
warna, serta masih
banyak lagi. CSS merupakan
fitur yang
sangat
penting
dalam
pembuatan Dynamic
HTML. Meskipun bukan merupakan
keharusan
dalam
membuat
web, namun penggunaan
CSS
merupakan
kelebihan
tersendiri.
Menggunakan
CSS tidak memerlukan perangkat
lunak tertentu, karena merupakan
scriptyang telah embedded dengan
HTML. Anda cukup menggunakan aplikasi
notepaduntuk menciptakan script CSS sendiri.
Manfaat dari CSS:
1. Kode HTML menjadi
lebih
sederhana dan lebih mudah
diatur,
2. Ukuran
file menjadi
lebih
kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan,
hanya dengan
merubah file CSS
saja,
4. Dapat berkolaborasi
dengan JavaScript
dan
merupakan pasangan setia
XHTML,
5. Digunakan
dalam
hampir semua web browser.
C. Sintaks & Penempatan Kode CSS
Sintaks CSS terdiri dari
tiga bagian:
selector
property
value
Selectoradalah elemen
atau tag HTML yang akan
di-definisi-kan. Propertyadalah
atribut
yang akan
diganti
dengan “nilai” tertentu. Properti dan nilai dipisahkan
dengan tanda titik dua (:) dan keduanya diapit
oleh tanda kurung
kurawal ({).
Berdasarkan ketiga bagian tersebut, sintaks dasar CSS dapat dituliskan:
selector { property:
value}
contoh 1:
p {
color:black }
Jika suatu nilai
mengandung spasi, nilai
tersebut harus diapit
dengan tanda petik
(“). Untuk memberikan
lebih
dari satu _property bagi suatu _property, pisahkan setiapkombinasi “property:value” dengan tanda titik koma (;).
Untuk membuat definisi gayalebih mudah
dibaca, definisi tiap property dapat
dilakukan
per baris. Sehinggasintaksnya menjadi:
selector { property1:
value; property2: “value_value”;
… }
contoh 2:
p {
text-align:center; font-family:“sans
serif” }
Aturan-aturan yang berlaku dalam
sintaks CSS:
1. Jangan ada spasi
antara property value dengan unitnya (contoh
1 & 2),
2. Nama properti bersifat CASE
SENSITIVE dan menggunakan
huruf kecil,
3. Jika nilai / value lebih
dari satu
kata,
maka gunakan tanda titik koma
(;) untuk membatasi
properti
yang satu
dengan yang
lain
(contoh
2),
4. Jika selector
lebih dari satu
dan
mempunyai
properti
dan
nilai
yang sama,
gunakan
tanda koma (,).
contoh: h1,h2,h3 {color:green}
Class selector
· Dengan
menggunakan class selector, Anda dapat mendefinisikan
perbedaan style untuk tag
elemen html yang
sama.
· Class dibuat
dengan tanda titik kemudian
diikuti dengan
namakelasnya
.namakelas{ }
contoh 3:
Misalkan
Anda ingin
membuat dua tipe paragraf
dalam
dokumen,
yang satu rata
kanan, dan yang
lain
rata kiri. Maka:
p.right
{text-align: right}
dan
p.left {text-align: left}
Aturan Class selector:
1. Jangan
memberi
nama
class dengan
angka,
2. Jika memberikan namaclass lebih dari
satu kata/kalimat,
penulisannya
menggunakan tanda petik (“).
ID Selector
Aturan penamaan ID:
1. Dapat mengandung
huruf,
angka, atau karakter garis bawah,
2. Karakter pertama harus berupa huruf atau karakter garis bawah,
3. Diawali
dengan tanda #,
4. Jangan
memberi
nama
id sama dengan
value,
5. Jangan
memberi
nama
id dengan tag
html
kemudian diikuti
tanda #.
contoh 4:
<html>
<head>
<style type
= "text/css">
<!--
#tebal {
font-weight : bold;
color : blue;
}
#miring {
font-style : italic;
color: pink; }
-->
</style>
</head>
<body>
<h1>Contoh</h1>
<h2 id = "miring"> Selamat Belajar CSS
</h2>
<h3 id =
"tebal">
Saya baru
pertama kali belajar CSS
</h3>
</body>
</html>
Penempatan kode CSS dalam HTML
Ada tiga cara penempatan
kode CSS
dalam
HTML:
1. Internal CSS
Metode penulisan kode CSS
langsung dalam file HTML.
contoh:
<html>
<head>
<style
type=”text/css”>
p {color:
white; }
body
{background-color: black; }
</style>
</head>
<body>
<p>Menguak
Rahasia CSS</p>
</body>
</html>
2. Eksternal CSS
Memanggil file CSS dari
tempat/folder/lokasi
lain, dengan kata lain file CSS
terpisah dengan
file HTML.
Browser akan
membaca definisi style dari file
test.css dan
akan mengikuti format tersebut. Eksternal style ditulis di text
editor lain dengan
ekstention
.css.
contoh:
<html>
<head>
<link rel=”stylesheet”
type=”text/css”href=”test.css”/>
</head>
<body>
<h3>Menguak
Rahasia CSS</h3>
</body>
</html>
3. Inline CSS
Penulisan kode CSS dalam tag HTML.
contoh:
nama File :
inline.html
<html>
<head>
</head>
<p
style=”background: red; color: black;”>Menguak
Rahasia
CSS</p>
</body>
</html>
Contextual Selectors
• Contextual Selectors digunakan jika style akan digunakan dalam situasi tertentu,
misalnya saja jika elemen
HTML yang
digunakan
merupakan sebuah kombinasi. Misalnya saja jika kita akan
membuat semua table data mempunyai align center , font arial,
dan
huruf berwarna orange.
<table>
<tr>
</tr>
<td></td>
<td></td>
</table>
Maka digunakan contextual selectors
Table tr td{ color: orange;
font-family: arial; Text-align:center;}
Contoh:
<html>
<head>
<style
type="text/css">
table tr td{color:orange; font- family:arial;text-align:center;}
</style>
</head>
<body>
<table
border="1">
<tr>
<td>Cinta</td>
<td>Bahagia</td>
</tr>
<tr>
<td colspan=2
align=center>Sedih</td>
</tr>
</table>
</body>
</html>
