Inf-Tuts ++ | Information On Your Hand: CSS

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;}
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>
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/ .
Sumber:
http://id.wikipedia.org/wiki/Cascading_Style_Sheets
http://www.belajarcss.com/panduan-css/
http://www.w3schools.com/css/

Inf-Tuts ++ | Information On Your Hand

Welcome Screen

Kamis, 05 Januari 2012

CSS

Tidak ada komentar:

Posting Komentar