Cascading Style Sheets (CSS) adalah suatu bahasa
stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang
ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah
untuk memformat halaman web yang ditulis dengan HTML dan XHTML.
Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua
jenis dokumen XML. Spesifikasi CSS diatur oleh World Wide Web Consortium
(W3C).
Keuntungan menggunakan CSS
- Memisahkan presentastion sebuah dokumen dari content document itu sendiri.
- Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web
- Mempercepat proses rendering/pembacaan HTML.
Namun dibalik kelebihan tersebut, ada juga kekuranganya yaitu
tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi
kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang
satu, tapi berantakan di browser yang lain. Jadi harus diperiksa
tampilannya supaya terlihat baik di semua browser dan menambahkan
kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan
web terlihat baik di semua browser.
Format penulisan CSS adalah selector { property: value } dimana
selector menunjukkan bagian mana yang hendak diatur / diformat, property
untuk menunjukkan, bagian (properti) dari selector yang hendak diatur,
sedangkan value adalah nilai dari pengaturannya.
Cara penggunaan CSS pada dokumen ada 4 cara yaitu
1.Iniline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format.
Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara sebaiknya hanya digunakan jika mau memformat suatu elemen satu kali
saja.
2.Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan
</head>. Penulisan CSS dengan cara ini diawali dengan tag
<style> dan diakhiri dengan tag </style>.
3.External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan
dengan akhiran .css. Anda lalu perlu memanggil file CSS tersebut ke
dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya
perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web
anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Pertama buat satu file dengan teks editor, dan beri nama misalkan:
style.css, lalu tuliskan kode-kode css di dalam file tersebut. Kedua
panggil file style.css dari semua halaman web. Caranya dengan memasukkan
kode <link rel=”stylesheet” href=”style.css” type=”text/css”>, di
antara tag <head> dan </head>
4.Import CSS
CSS juga dapat di-import ke dalam suatu halaman website menggunakan
tag import seperti @import “style.css”; atau @import url(“style.css”);.
Untuk membuat suatu tag memiliki format berbeda di tempat yang
berbeda dapat memanfaatkan Class Selector, cara penulisannya adalah
.nama-class {property:value;} sedangkan untuk implementasinya
menggunakan taghtml.nama-class {Property:value;} .Jika anda ingin
menggunakan class selector di luar kode HTML anda menggunakan tag
<div class=nama-class> dan di akhiri dengan tag </div>.
Berikut penulisan CSS dengan Class Selector
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Contoh implementasinya seperti dibawah ini
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Untuk mem-validasi CSS dapat dilakukan di http://jigsaw.w3.org/css-validator/ .
Info lebih lengkap tentang properti-properti yang tersedia di CSS bisa dilihat di http://xhtml.com/en/css/reference/ .
Info lebih lengkap tentang properti-properti yang tersedia di CSS bisa dilihat di http://xhtml.com/en/css/reference/ .
Sumber:
http://id.wikipedia.org/wiki/Cascading_Style_Sheets
http://www.belajarcss.com/panduan-css/
http://www.w3schools.com/css/
http://id.wikipedia.org/wiki/Cascading_Style_Sheets
http://www.belajarcss.com/panduan-css/
http://www.w3schools.com/css/
0 comments:
Post a Comment