Cascading Style Sheet
a. Pengertian CSS
CSS adalah bahasa stylesheet yang menggambarkan
presentasi dari HTML (atau XML) dokumen. CSS menjelaskan bagaimana elemen harus
diberikan pada layar, di atas kertas, atau di media lain.
b. Manfaat 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 dan Penempatan
Sintaks CSS terdiri dari tiga
bagian:
o Selector
o Property
o Value
Selector adalah elemen atau tag
HTML yang akan didefinisikan.
Property adalah atribut yang
akan diganti dengan “nilai” tertentu. Properti dan nilai dipisahkan dengan tanda titik dua (:) dan
keduanya diapit oleh tanda kurung kurawal ({).
Value adalah isi dari perintah tersebut.
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 membuat definisi gaya lebih
mudah dibaca, definisi tiap property dapat dilakukan per baris. Sehingga
sintaksnya menjadi:
selector { property1:
value; property2: “value_value”; … }
contoh 2:
p { text-align:center;
font-family:“sans serif” }
Aturan-aturan yang berlaku dalam
sintaks CSS:
o Jangan ada spasi
antara property value dengan unitnya (contoh 1 & 2),
o Nama properti
bersifat case sensitive dan menggunakan huruf
kecil,
o Jika nilai / value
lebih dari satu kata, maka gunakan tanda titik koma (;) untuk membatasi
properti yang satu dengan yang lain (contoh 2),
o Jika selector
lebih dari satu dan mempunyai properti dan nilai yang sama, gunakan tanda koma
(,).
o contoh: h1,h2,h3
{color:green}
Class selector
Dengan menggunakan class
selector, maka dapat mendefinisikan
perbedaan style untuk tag elemen html yang sama.
contoh 3:
Misalkan 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:
o Jangan memberi nama
class dengan angka,
o Jika memberikan nama class
lebih dari satu kata/kalimat, penulisannya menggunakan tanda petik (“).
d. Penempatan Kode CSS pada HTML
Ada tiga cara
penempatan kode CSS dalam HTML:
q 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>Pengertian CSS</p>
</body>
</html>
q 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 ekstensi .css. contoh:
<html>
<head>
<link
rel=”stylesheet” type=”text/css” href=”test.css”/>
</head>
<body>
<h3>Pengertian CSS</h3>
</body>
</html>
q Inline CSS
Penulisan kode CSS
dalam tag HTML. contoh:
<html>
<head>
</head>
<p
style=”background: red; color: black;”>Pengertian CSS</p>
</body>
</html>
Contoh penerapan:
Hasilnya adalah:
Sekian dari saya, semoga bermanfaat J.
Tidak ada komentar:
Posting Komentar