Cascading Style Sheet (CSS) part 1


Pengertian CSS
Cascading Style Sheet (CSS) adalah suatu bahasa stylesheet yang digunakan
untuk mengatur tampilan dokumen yang ditulis dalam format (X)HTML,
XML, SVG maupun XUL. Dengan menggunakan CSS, tampilan dari
dokumen tersebut akan lebih menarik dan hanya membutuhkan satu kali
pendefinisian. Jadi akan sangat menghemat waktu dalam mendesain tampilan
aplikasi berbasis web. Tampilan yang dapat diatur dalam CSS meliputi text,
warna, tata letak, background, visible/invisible, dll.
Aturan CSS
Seperti bahasa pada umumnya, CSS juga memiliki aturan dalam
menuliskannya. Adapun aturan tersebut adalah :
Terdiri atas selector (berupa nama tag dokumen markup) dan declaration
(berupa attribute beserta nilainya). Misalnya : h1 {color : red;}. Penulisan
CSS dapat dilakukan pada file lain atau di dalam dokumen markup.
Jika ditulis pada dokumen markup dan inline :
1. Menggunakan attribute style : <h1 style=”color:blue” />
Jika ditulis pada dokumen markup tetapi tidak inline (embedded) :
2. Diletakkan pada tag <head> … </head>
3. Diawali dengan tag <style> [kode ditulis di sini] </style>
Jika ditulis pada file lain (*.css):
26
1. Diletakkan pada tag <head> … </head>
2. Menulis embed file stylesheet <link rel=”stylesheet”
href=”style.css” />
Tips : Untuk lebih efektif dan efisien, penulisan stylesheet sebaiknya
menggunakan aturan yang ke tiga, yaitu dengan cara embed. Karena
memiliki beberapa kelebihan, yaitu :
1. Tidak memerlukan pendefinisian yang berulang-ulang sehingga
memperkecil terjandinya redundansi style.
2. Global style, jika terjadi perubahan, maka hanya 1 file yang diganti,
bukan tiap-tiap dokumen markup
3. Dokumentasi dan pemeliharaan yang lebih mudah.
4. Dalam menulis stylesheet disarankan untuk menggunakan tools
macromedia dreamweaver, karena setiap declaration akan otomatis
suggest.
Selector yang dikenali oleh CSS adalah HTML, ID dan CLASS. Untuk
selector ID, dapat digunakan pada semua element HTML dengan menuliskan
attribute ID pada elemen HTML tersebut dan menambahkan karakter “#”
pada dokumen CSS. Sedangkan untuk selector CLASS, dengan
menambahkan karakter “.” Pada dokumen CSS dan pada elemen HTML
menambahkan attribute class.
HTML Selector ID Selector Class
<div>Isi
Text</div>
<div id=’text’>Isi
Text</div>
<div class=’text’>Isi
Text</div>
div{
color:yellow;
text-align:center;
}
#text {
color:red;
text-align:center;
}
.text {
color:blue;
text-align:right;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s