Dasar CSS
Untuk dapat mengerti bagaimana menggunakan CSS, terlebih dahulu kita harus mengerti tiga istilah dasar yang digunakan dalam CSS, yaitu selector, property, dan value. Pembahasan mengenai makna dari ketiga istilah tersebut akan dilakukan pada bagian selanjutnya.
Selector
Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS
menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang ingin
diberikan gaya tampilan. Pemilihan elemen HTML dilakukan dengan
menspesifikasikan selector. Kode di bawah memberikan contoh dari
sebuah selector, yang dapat digunakan untuk memberikan gaya tampilan terhadap
seluruh elemen p yang
ada pada dokumen HTML:
p {
....
}
Pada kode di atas, yang dikatakan selector ialah kode “p”. Singkatnya, sebuah selector
merupakan seluruh kode yang berada sebelum “{}”.
Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen p yang ada dalam dokumen.
Selain memberikan desain pada seluruh elemen seperti ini, selector juga dapat
memberikan desain secara lebih spesifik: melalui klasifikasi, identitas,
ataupun berbagai atribut lainnya dari sebuah elemen. Pembahasan selector secara
mendalam dapat ditemukan pada bab.
Property
Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari
sebuah elemen yang dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode
di bawah:
p {
color: ...;
font-size: ...;
}
Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum
titik dua (“:”). Kegunaan
dari kedua properti tersebut tentunya cukup jelas dari nama yang diberikan,
yaitu color untuk
memberikan warna pada elemen p,
dan font-size untuk
mengubah ukuran teks. Terdapat sangat banyak properti yang dapat digunakan,
tetapi pembahasan mengenai detil pengunaan tiap-tiap properti tidak akan
dilakukan pada buku ini. Jika terdapat pengunaan properti baru, penjelasan akan
diberikan pada bagian yang relevan. Daftar properti sendiri dapat dibaca di.
Value
Value merupakan nilai dari property yang ingin kita berikan. Nilai yang
dapat diberikan sendiri berbeda-beda, tergantung dengan jenis property-nya.
Misalnya, jika ingin memberikan nilai warna, kita harus memberikan nilai dalam
format #RRGGBB (kombinasi
nilai heksa merah-hijau-biru yang biasa digunakan pada program pengolah grafis
seperti Photoshop). Ketika ingin memberikan nilai ukuran, kita dapat memberikan
nilai dalam format nilai px atau nilai em. Untuk lebih
jelasnya, kode berikut memberikan contoh value dari properti yang ada pada kode
sebelumnya:
p {
color: #FFFF00;
font-size: 50px;
}
Sintaks CSS
Setelah mengerti makna dari Property, Value, dan Selector, kita dapat
melihat bahwa sintaks dari CSS adalah seperti yang ditampilkan pada gambar
berikut:
Sintaks CSS
Ingat, bahwa pada satu selector dapat diaplikasikan banyak property, dan
masing-masing property akan memiliki value yang berbeda-beda, bergantung kepada
apa yang direpresentasikan oleh property tersebut.
Penyingkatan Nilai dari Property
Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk
menyingkat nilai yang diberikan. Untuk lebih jelasnya, perhatikan kode berikut:
/*
Bentuk Panjang
*/
p {
margin-top : 10px;
margin-right : 20px;
margin-bottom : 10px;
margin-left : 20px;
}
/*
Bentuk Singkat (1)
*/
p {
margin: 10px 20px;
}
/*
Bentuk Singkat (2)
*/
p {
margin: 10px;
}
Pada bentuk panjang pada kode di atas, nilai margin atas, kanan, bawah, dan
kiri diberikan satu per satu, sesuai dengan property yang ada. Penulisan ini
dapat kita singkat dengan menggunakan hanya property margin dan dua value, yang
secara otomatis akan mengisikan nilai top dan right, kemudian bottom dan left.
Bentuk singkat kedua memberikan nilai keempat margin dengan satu value.
Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan
penulisan singkat ini. Beberapa (tetapi tidak semua) property yang dapat
dituliskan secara singkat misalnya: margin, padding, border, dan background.
Untuk mendapatkan informasi lebih lanjut mengenai property tersebut silahkan
baca dokumentasi property CSS yang bersangkutan.
Mengimplementasikan CSS pada HTML
Setelah HTML selesai dituliskan, kita dapat mereferensikan CSS kepada HTML
yang ada agar desain yang dispesifikasikan oleh CSS dapat diaplikasikan pada
HTML. Terdapat tiga cara untuk memberikan referensi CSS, yaitu:
Referensi ke File Eksternal
Kita dapat memberikan referensi ke sebuah file CSS yang berada di luar
HTML. Cara referensi CSS seperti ini seringkali dianggap sebagai best
practice dalam pengembangan web.
Penulisan CSS pada Elemen Head
CSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan
pada bagian head dari
sebuah dokumen. Penulisan CSS seperti ini tidak disarankan, karena umumnya
elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen
lain. Penulisan CSS langsung pada bagian head akan menyebabkan elemen-elemen yang
berulang harus dituliskan ulang pada dokumen lain juga.
CSS di dalam Atribut style pada Elemen
Menuliskan CSS di dalam atribut style pada elemen HTML (atribut ini
dimiliki oleh semua elemen) merupakan cara terakhir, yang juga tidak disarankan
karena penulisan seperti ini akan “mengotori” kode HTML. HTML dibuat dengan
tujuan untuk memberikan makna semantik untuk konten, bukan desain. Begitupun,
metode ini biasanya digunakan untuk manipulasi gaya yang dilakukan secara
dinamis, melalui Javascript (yang tidak mengotori kode HTML, karena biasanya
atribut baru diisikan setelah HTML selesai dibaca oleh browser).
Untuk lebih jelasnya, kode di bawah memberikan contoh cara melakukan
referensi CSS pada sebuah dokumen HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pengenalan
HTML</title>
<!--
Referensi pada Elemen Head -->
<style
type="text/css">
h1
{
color: red;
}
</style>
<!--
Referensi pada file eksternal -->
<link
rel="stylesheet" href="style.css">
</head>
<body>
<h1>Berita
Utama</h1>
<p>
Elemen h1 digunakan untuk
menandakan sebuah header dari teks
(h1 == header 1). Konten teks
ini sendiri berada di dalam
sebuah paragraf, yang
ditandai oleh elemen p.
</p>
<!--
CSS langsung pada atribut style -->
<p
style="font-weight: bold;">
Paragraf kedua.
</p>
</body>
</html>
Mari kita coba jalankan kode yang ada pada kode di atas! Sebelum
menjalankan kode tersebut, tentunya kita harus membuat file style.css yang
direferensikan oleh elemen link pada
kode di atas terlebih dahulu. Simpan kode di atas pada sebuah file bernama referensi-css.html, dan
kemudian buat sebuah file baru dengan nama style.css di dalam direktori yang sama dengan referensi-css.html. Isikan file style.css dengan kode
berikut:
p {
font-size: 50px;
}
Sedikit catatan untuk mereferensikan file CSS eksternal, pada kode di atas,
file style.css harus
berada di dalam direktori yang sama karena atribut href diisikan tanpa penunjuk direktori.
Jika misalnya kita ingin menyimpan file pada direktori yang berbeda, maka kita
dapat menambahkan direktori sebelum nama file. Misalnya jika file disimpan
dalam subdirektori “style”, kita dapat mengisikan style/style.css pada atribut href.
Setelah selesai menyimpan referensi-css.html dan style.css, jalankan referensi-css.html dan
lihat hasilnya, seperti pada gambar berikut:
Hasil Eksekusi referensi-css.html
Perhatikan bagaimana CSS mempengaruhi penampilan dari HTML, hanya dengan
sedikit deklarasi kode. Gambar berikut menunjukkan perbandingan dokumen HTML
yang memiliki CSS dan tidak memiliki CSS:
Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS
Perhatikan bagaimana setiap CSS mempengaruhi elemen-elemen yang
bersangkutan pada gambar Perbandingan
Dokumen HTML dengan CSS dan Tanpa CSS. Teks pada elemen h1 berubah menjadi warna
merah karena CSS yang berada pada bagian atas dokumen, paragraf memiliki teks
yang sangat besar (50px) karena CSS dari file style.css, dan paragraf kedua
(dan hanya paragraf kedua) dicetak tebal karena CSS yang berada di atribut style pada paragraf kedua.
Ketiga CSS yang terpisah tersebut berjalan dengan baik.
Yang juga perlu diingat, cara terbaik dalam mereferensikan CSS ialah dengan
referensi ke file eksternal. Cara ini memungkinkan kita hanya menggunakan satu
file CSS untuk seluruh web yang dikembangkan. Perubahan desain juga dapat
dilakukan dengan mudah, hanya mengubah satu buah file saja. Pengguna juga hanya
perlu melakukan sedikit download (karena seluruh file berada di satu tempat,
dan seringkali browser akan menggunakan teknologi caching untuk tidak melakukan
download berulang kali pada file yang sama).
Layout
