CSS
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;
}
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>
Komentar
Posting Komentar