Untuk dapat mengerti bagaimana menggunakan CSS, anda harus mengerti dahulu dasar-dasar CSS dan anda harus mengerti tiga istilah dasar yang digunakan dalam CSS, yaitu selector, property, dan value.
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:
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.Property
Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari sebuah elemen yang dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode di bawah:
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.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:
Sintak CSS
Setelah mengerti makna dari Property, Value, dan Selector, kita dapat melihat bahwa sintaks dari CSS adalah seperti yang ditampilkan pada gambar berikut:
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.
Contoh penggunaan CSS yang sederhana :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pengenalan HTML</title>
<style type="text/css">
h1 {
color: red;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Berita Utama</h1>
<p>
paragraf pertama
</p>
<p style="font-weight: bold;">
Paragraf kedua.
</p>
</body>
</html>
Output script diatas :
Semoga bermanfaat, terima kasih atas kunjungannya.
Tidak ada komentar:
Posting Komentar