Belajar CSS

Belajar CSS, bagaimana CSS dapat merubah tampilan website
Oct 09 2007
Ditulis oleh Dhimas Ronggobramantyo

Kategori: CSS (Cascading Stylesheet)
Dibaca 51908 kali
Langsung lihat komentar
Bayangkan jika anda memiliki website dengan 100 halaman. Bayangkan apabila anda ingin
mengganti jenis huruf dari tiap website. Hal tersebut tentu saja sangat membuang waktu, tetapi
jika anda menggunakan CSS untuk mendesain tampilan web, maka hal tersebut dapat dilakukan
dengan mudah.
Pertama-tama kita kenalan dulu dengan CSS. CSS merupakan kependekan dari Cascading Style
Sheet yang memungkinkan kita untuk mendesain (style) tampilan dokumen (terutama HTML)
dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS). Jika
kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti
jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan
berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang
pada dikumen HTML yang telah jadi.
Memasang CSS
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: External Style Sheet (file CSS
berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).
Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam
mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode
berikut ini:
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>
<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>
<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.
Apapun yang terjadi, berusahalah untuk selalu menggunakan External CSS dengan memisahkan
file CSS dengan file HTML nya
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>
<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:
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 bkode 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.
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;
}
Link
Salah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link,
menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru
tua terang dengan garis bawah anda dapat mengubahnya.
Coba kode CSS berikut:
a.link1:link {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:visited {
font-weight: bold;
font-size: 12px;
color: #CC6600;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
text-decoration: underline;
}
Sekarang untuk kode HTML nya cobalah seperti ini:
Kunjungi <a href="http://www.dhimasronggobramantyo.com"

class="link1">dhimasronggobramantyo.com</a> atau
<a href="http://www.google.com" class="link2">google.com </a>
Maka akan menghasilkan:
Kunjungi dhimasronggobramantyo.com atau google.com
Pada umumnya warna link untuk halaman web yang telah dikunjungi berbeda dengan yang
belum dikunjungi. CSS dapat membedakannya dengan yang disebut pseudo-class ':link',
':hover', ':active' dan ':visited' untuk membedakannya:
 :link pseudo-class merupakan link yang belum dikunjungi.

 :visited pseudo-class merupakan link yang telah dikunjungi.
 :hover pseudo-class applies merupakan link apabila pointer mouse melewati sebuah
link.
Itulah semua dasar CSS, semakin dalam anda mempelajari CSS maka anda akan menemukan
hal-hal menarik lainnya. Selamat mencoba.
4 Browser utama Internet Explorer, Firefox, Safari dan Opera memiliki cara sendiri dalam
merepresentasikan CSS. Karena itu pastikan tampilan CSS website anda terlihat sama disemua
browser tersebut. Bahkan antara IE 5, 6 dan 7 sudah berbeda-beda. Jadi tantangan bagi anda
adalah membuat halaman website anda tampak sama disemua browser tanpa terkecuali.

Belajar CSS

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Belajar CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

Belajar CSS, bagaimana CSS dapat merubah tampilan website

Ditulis oleh Dhimas Ronggobramantyo

Langsung lihat komentar

Jika kita menggunakan Internal CSS, maka kodenya akan menjadi:

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

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

Jika ingin menggunakan jenis huruf serif, gunakan kode berikut:

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

body {Courier New, Courier, monospace}

Coba kode berikut ini:

Sekarang untuk kode HTML nya cobalah seperti ini:

Kunjungi <a href="http://www.dhimasronggobramantyo.com"

Maka akan menghasilkan:

Kunjungi dhimasronggobramantyo.com atau google.com

 :link pseudo-class merupakan link yang belum dikunjungi.

Anda mungkin juga menyukai