Belajar CSS, bagaimana CSS dapat merubah tampilan website
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>
<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.
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> <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:
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;
font-family: Times New Roman;
text-decoration: none;
}
a.link1:hover {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: underline
}
a.link1:active {
font-weight: bold;
font-size: 12px;
color: #C87C28;
font-family: Times New Roman;
text-decoration: none;
}
a.link2:link {
font-weight: bold;
font-size: 12px;
color: #663300;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
a.link2:visited {
font-weight: bold;
font-size: 12px;
color: #800000;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.link2:hover {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline overline;
}
a.link2:active {
font-weight: bold;
font-size: 12px;
color: #ff6600;
font-family: Arial, Helvetica, sans-serif;
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::linkpseudo-class merupakan link yang belum dikunjungi.:visitedpseudo-class merupakan link yang telah dikunjungi.:hoverpseudo-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.
Suka dengan artikel ini? Sebarkan keseluruh dunia melalui Jejaring Sosial berikut ini:
0 komentar:
Posting Komentar
lakukan yang terbaik