Arsip Bulanan: April 2010

Apr 6 2010

Yang Baru dari CSS

Menurut Wikipedia 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 termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).

CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.

CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

Contoh Program CSS:

Tanpa CSS

<html>
<head>
<title>Belajar CSS</title>
</head>
<body>
<h1><font face="Verdana">Belajar CSS</font></h1>
</body>
</html>

Jika kita menggunakan Internal CSS, maka kodenya akan menjadi:

<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
h1 { font-family: verdana; }
</style>
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html>

Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css dan isikan kode berikut:

h1 { font-family: verdana; }

Sekarang untuk kode HTML tulislah kode berikut ini dan simpan dengan nama coba.html:

<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html>

Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag <link> yang diletakkan diantara tag <head>. Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian <body> saja bagian yang didalam <head> tidak usah diapa-apakan.

CSS terdiri dari dua bagian utama yaitu: selector, dalam hal ini H1 dan deklarasi yang berada diantara kurung kurawal {font-family: verdana}. Didalam deklarasi juga terbagi menjadi dua bagian yaitu property dalam hal ini font-family dan value dalam hal ini verdana. Dalam contoh diatas hanya mengubah sebuah tag yaitu tag <h1> menjadi teks dimana jenis hurufnya menjadi verdana. Kita dapat mengkombinasikan berbagai macam style menjadi satu. Kita akan segera mempelajarinya.

Sekarang kita coba mengkombinasikan banyak style. Cobalah kode CSS berikut ini dan simpan dengan nama style.css:

.title { 
    font-size: 13px;
    color: #6095d0; 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight:bold; 
}
.thank {
    font-size: 11px; 
    color: #000000; 
    font-family: Georgia, "Times New Roman", Times, serif;
}p { 
    font-size: 12px; 
    color: #000000; 
    font-family: verdana; 
}

Sekarang tulis kode HTML ini dan simpan dengan nama coba.html:

<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<font class="title">Halo dunia</font>
<p>Saya mau belajar CSS, ini kode CSS saya yang pertama</p>
<font class="thank">Terimakasih</font>
</body>
</html>

Hasil:

Contoh Penggunaan CSS

Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS.

CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang penting-penting saja.

Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag <font>. Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat kode berikut:

<h1 style="font-family: 'Times New Roman', Times, serif">Serif 
font</h1>

Jika anda ingin menampilkan jenis huruf sans-serif gunakan kode berikut:

body {Arial, Verdana, Geneva, Helvetica, sans-serif}

Jika ingin menggunakan jenis huruf serif, gunakan kode berikut:

body {Times New Roman, Times, Georgia, serif}

Untuk jenis huruf untuk kode program dapat anda gunakan kode berikut:

body {Courier New, Courier, monospace}

Scrollbar

Dengan menggunakan CSS anda juga dapat mengubah warna pada scrollbar yang terdapat dikanan browser. CSS memiliki 8 properties untuk mengubah warna pada scrollbar yaitu: scrollbar-arrow-color, scrollbar-basecolor, scrollbar-face-color, scrollbar-shadow-color, scrollbar-darkshadow-color, scrollbar-3dlight-color, scrollbar-highlight-color dan scrollbartrack-color. Properties-properties ini mengatur warna untuk setiap bagian dari scrollbar.

Property CSS untuk Scrollbar

Coba kode berikut ini:

body {
scrollbar-face-color: #ffffff; 
scrollbar-highlight-color: #8b98b7; 
scrollbar-shadow-color: #8b98b7; 
scrollbar-3dlight-color: #8b98b7; 
scrollbar-arrow-color: #8b98b7; 
scrollbar-track-color: #ffffff; 
scrollbar-darkshadow-color: #8b98b7; 
scrollbar-base-color: #ffffff;
}