Cascading Syle Sheets pada website merupakan program style sheet yang mengatur dan mengendalikan gambar, bagian body, tabel, border, warna hyperlink, mouseover, paragraf, spasi, margin kiri/kanan/atas/ bawah dan parameter lain. Nama Cascading Syle Sheets didapat dari fakta bahwa setiap deklarasi style yang berbeda-beda bisa diletakkan secara berurutan, membentuk hubungan parent-child pada setiap deklarasi style.
CSS merupakan bahasa pemrograman untuk mengkontrol komponen website sehingga lebih terstruktur dan seragam. Dengan CSS memungkinkan ditampilkan page yang sama dengan format berbeda.
Sintax Dasar Kode CSS
Awalnya semua penulisan kode - termasuk pengaturan presentasi - ditulis dalam tag HTML. Kemudian dirintis penulisan kode PENGATURAN PRESENTASI tampilan dokumen website secara tersendiri dan dikenal sebagai bahasa kode CSS untuk style tampilan webpage.
selector {property : value}Selector = merupakan tag HTML atau elemen (baik class maupun id) yang akan diatur.
Bagian yang diapit '{}' disebut declaration terdiri 2 unsur, property dan value.
Property = merupakan atribut elemen yang ingin ditentukan nilainya.
Value = merupakan nilai dari atribut elemen, bisa berupa angka dan text.
Untuk menjelaskan lebih jauh, perhatikan contoh di bawah ini. Sering dijumpai kode berikut :
h1 { color: #0789de;kode warna pada color: #0789de; bisa ditulis dalam bentuk : color: red; Sehingga menjadi :
}
h1 { color: red;Penjelasannya :
}
tag header yaitu h1 merupakan selector
color merupakan property
#0789de atau red merupakan value
Perhatikan pendefinisian property dan atribut berada diantara tanda "{ }" dan pendefinisian value dengan tanda " :"dan diakhiri " ;"
Contoh Berkas CSS
<html>
<head>
<style type="text/css">
body { background-color:#d0e4fe;
}
h1 { color:orange;
text-align:center;
}
p { font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body> <h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Sifat CSS
Sifat pertama, penulisan (script) CSS terintegrasi dengan script HTML dalam desain website. Kalau webpage lain akan didesain dengan model sama, maka skrip CSS tersebut harus dimasukkan lagi ke dalam webpage yang lain itu. Atau lebih dikenal sebagai CSS Internal.
Sifat kedua, penulisan script CSS dipisahkan dalam file tersendiri. Sehingga bisa digunakan lagi dalam pembuatan website lain dengan model sama, maka cukup menggunakan semacam tautan menuju file CSS tersebut. Kelebihan cara kedua adalah HTML bisa merekomendasikannya untuk pihak luar. Atau lebih dikenal sebagai CSS Eksternal.
Penulisan CSS
CSS Internal memiliki 2 cara penulisan dan 1 cara penulisan CSS Eksternal.
A. Metode Penulisan CSS Internal
(1). Metode Inline Style Sheet
CSS didefinisikan langsung pada tag HTML bersangkutan. Cara penulisan dengan menambahkan atribut style="..." dalam tag HTML
tersebut. Style ini hanya berlaku pada tag bersangkutan, dan tidak
berpengaruh pada tag yang lain. Contoh Metode Inline Style Sheet :
<html>
<head> <title>Contoh Bentuk Inline</title>
</head>
<body bgcolor="#FFFFFF"> <p id="cth1">
Ini adalah contoh tag P tanpa diformat menggunakan CSS </p>
<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
(2). Metode Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag<style> ... </style>di atas tag <body> Pada pendefinisian ini disebutkan atribut2 CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag yang bersangkutan (tag-tag yang ada diantara<body> … </body>.
Contoh penggunaan CSS dengan metode Embedded Style Sheet :
<html>
<head> <title>Contoh Bentuk Embedded/title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body> <h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
Contoh lainnya :
Misalnya menyisipkan snippet CSS di bawah ini di bagian haed atau diantara <head> … dengan … </head> dokumen HTML :
<style type='text/css'>Kemudian setiap huruf pertama atau kata pertama atau frase pertama pada posting baru diatur seperti ini : (misalnya pada frase pertama) :
.dropcap {font-family:Tangerine;font-style:italic;color:#D55106;font-size:280%;font-weight:bolder}
</style>
<span class="dropcap">Cascading Syle Sheets   </span>pada website bla bla blaMaka hasilnya terlihat seperti pada baris pertama artikel ini (lihat gambar di bawah ini).
B. Metode Linked Style Sheet (Untuk CSS Eksternal)
Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian :
- tag<style> ... </style>
dibuat file terpisah dari file HTML yang membutuhkan CSS. File tersebut disimpan dalam format.css.
File HTML yang akan menggunakan file CSS, harus dibuat tag<link> yang dituliskan di antara :
- tag <head> ... </head>
Contoh seperti dibawah ini (simpanlah dengan nama file contoh.css :
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
Penggunakan CSS
* Telah didukung oleh kebanyakan browser versi terbaru.* Fleksibel dalam penempatan posisi layout.
Dalam layouting CSS ada Z-Index untuk menempatkan objek dalam posisi yang sama.
* Menjaga HTML dalam penggunaan tag dengan jumlah minimal.
Hal ini berpengaruh terhadap ukuran berkas dan speed pengunduhan.
* Bisa menampilkan konten utama terlebih dahulu, sementara tampilan gambar menyusul.
* Penerjemahan CSS setiap browser berbeda, layout akan berubah jika
dilihat dari berbagai browser * CSS layouting "Masa Depan" dengan penggabungan bersama XHTML.
0 komentar:
Posting Komentar