Modul CSS
18
Click here to load reader
-
Upload
subkhan-akbar -
Category
Documents
-
view
290 -
download
1
Transcript of Modul CSS
Belajar CSS, bagaimana CSS dapat merubah tampilan website
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).
Contoh 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, caranya : dari dreamweaver pilih menu file – new – css – create
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 latihancss1.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 latihancss1.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.
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: 100px; color: #000000; font-family: verdana; }
Sekarang tulis kode HTML ini dan simpan dengan nama latihancss2.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.
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}
LinkSalah 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.Google.com" class="link1">Google.com</a> atau <a href="http://www.google.com" class="link2">google.com </a>
Coba perhatikan hasilnya dibrowser.
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.
Memanfaatkan Unordered List untuk membuat menu horizontal, vertikal dan sitemap
Anda tentu tidak asing lagi dengan tag HTML <ul> dan <ol>. Ya kedua tag ini digunakan untuk membuat list / urutan. Dan dengan bantuan CSS kita dapat membuat tag <ul> yang kita anggap remeh ini menjadi sesuatu yang wajib kita pakai dalam membuat website
Unordered List
Oke, mari kita ingat terlebih dahulu mengenai list, jika anda memiliki kode seperti ini:
<ul> <li>List 1</li> <li>List 2</li> <i>List 3</li></ul>
Maka hasilnya akan seperti ini:
List 1 List 2 List 3
Oke anda sudah ingat?, sekarang apa saja yang bisa kita lakukan dengan list yang membosankan seperti itu? Banyak, dengan bantuan CSS kita bisa memanfaatkan list untuk membuat website kita menjadi lebih menarik.
Yang perlu kita ingat bahwa unordered list selalu terdiri dari 2 tag, yaitu tag <ul> dan <li>. Oke sekarang anda coba berikut ini dan simpan dengan nama menu.html:
<ul> <li><a href="#">Home</a></li> <li><a href="#">Artikel</a></li> <li><a href="#">Kategori</a></li> <li><a href="#">Belajar List</a></li></ul>
Maka hasilnya seperti ini:
Home Artikel Kategori Belajar List
Membuat kotak mengelilingi menu
Pertama-tama kita akan coba membuat kotak yang mengelilingi menu kita. Karena kotak berada dibagian terluar dari menu, maka kita perlu mengubah CSS untuk tag <ul>. Cobalah kode CSS berikut ini:
ul {border: 1px solid #000;margin: 5px;width: 160px;
padding: 5px;}
.
Jika bullet masih terlihat khususnya di firefox maka ubahlah kode CSS nya menjadi:
ul {border: 1px solid #000;margin: 5px;width: 160px;padding: 5px 5px 5px 25px;
}
Berikutnya kita akan coba mengganti bullet (yang bentuknya lingkaran dan terlihat membosankan) dengan images. Silahkan simpan contoh images untuk bullet ini untuk digunakan pada contoh berikut ini. Sekarang cobalah CSS berikut ini:
ul {border: 1px solid #000;margin: 5px;width: 160px;padding: 5px 5px 5px 25px;list-style-image: url(bullet.gif);
}
Tetapi jika anda tidak suka menggunakan images, anda dapat menggantinya dengan panah atau istilah kerennya "right double angle quote". Kode Hexa untuk membuat panah adalah », dan karena kita menggunakan CSS maka kita tidak bisa menggunakan Hexa, kita harus menggunakan kode ASCII. Anda tidak perlu repot mencari kode ASCII untuk » / » saya akan memberitahukannya yaitu 00BB dan 0020 untuk spasi.
Jika hasilnya tidak sesuai denga keinginan ganti kode CSS nya menjadi seperti ini:
ul {border: 1px solid #000;margin: 5px;width: 160px;padding: 5px 5px 5px 25px;list-style: none;
} li:before {
content: "\00BB \0020";}
Vertical MenuUntuk membuat menu yang menarik kita perlu kreatif dalam membuat CSS untuk tag <li> dan <a>. Silahkan anda coba kode CSS berikut ini:
ul { margin: 5px;width: 160px;padding: 5px 5px 5px 15px;list-style: none;} li a{
display:block;color:#ff8d1b;text-decoration:none;border-bottom:1px dashed #ff7f00;padding:2px 2px 2px 5px;font-family:Georgia, garamond, serif;
}li a:hover{
display:block;color:#db6d00;text-decoration:none;border-bottom:1px dashed #ff7f00;background:#ffdfbf;
}
Jika anda perhatikan tidak banyak perbedaan dari kode CSS sebelumnya. Hanya saja kita memberikan kode CSS untuk tag <a>. Yang terpenting disini kita memberikan warna background yang berbeda untuk li a dengan li a:hover. Jangan lupa menambahkan display:block; agar perubahan efek hover bisa terjadi ketika mouse berada didalam kotak bagian li, tidak perlu harus mengenai teksnya.
Untuk IE 6 akan selalu memunculkan jarak pada <li>, untuk menghilangkan hal tersebut kita perlu mendempetkan kode HTML untuk <li>. Jika kode HTML kita sebelumnya seperti ini:<ul><li><a href="#">Home</a></li><li><a href="#">Artikel</a></li><li><a href="#">Kategori</a></li><li><a href="#">Belajar List</a></li></ul> Maka kita perlu mengubahnya menjadi:<ul><li><a href="#">Home</a></li> <li><a href="#">Artikel</a></li> <li><a href="#">Kategori</a></li> <li><a href="#">Belajar List</a></li></ul>
Horizontal Menu
Kita pun dapat membuat menu horizontal dengan mudah. Coba anda buat kode CSSnya seperti ini:
ul { margin: 0;padding:0;list-style: none;} li {
display:inline;}li a{
float:left;color:#ff8d1b;text-decoration:none;border-right:1px solid #ff7f00;border-bottom:1px solid #fff;border-top:1px solid #fff;padding:2px 10px 2px 10px;font-family:Georgia, garamond, serif;
}li a:hover{
float:left;color:#db6d00;text-decoration:none;border-bottom:1px solid #ff7f00;border-top:1px solid #ff7f00;background:#ffdfbf;
}
jadi yang perlu diingat disini adalah untuk menambahkan float:left; pada tag <a>. float:left; berguna untuk membuat menunya menjadi menyamping (Horizontal). Karena kita membuat menu menyamping kita tidak perlu mengatur width untuk <ul>. Dan seperti biasa di IE 6 tampilannya tidak pas horizontal, karena itu perlu diperbaiki dengan memberikan display:inline pada tag <li>
Membuat Horizontal Menu dengan CSS, Images Sprites dan Animasi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Contoh Horizontal Menu</title></head><body><h1>Contoh Horizontal Menu</h1><ul id="topmenu"><li><a href="#" class="replace" id="menu_1" title="Home"><span></span>Home</a></li><li><a href="#" id="menu_2" title="Artikel"><span></span>Artikel</a></li><li><a href="#" id="menu_3" title="About Me"><span></span>About Me</a></li></ul><div id="container"><p>Baca artikel tentang <a href="#">Membuat Horizontal Menu</a> untuk mengetahui cara membuat menu seperti ini.</p></div></body></html>
Sudah terlihat kan bentuk menunya, ya masih biasa karena kita belum menstyle nya dengan CSS. Oke jika anda perhatikan untuk tiap menu (<li>) memiliki id yang berbeda-beda. Kenapa? karena setiap menu panjang imagenya berbeda, maka CSS nya juga berbeda-beda untuk tiap menunya. Sebelum kita mulai membuat CSS nya silahkan anda save gambar-gambar berikut ini dengan nama menu_1.jpg, menu_2.jpg dan menu_3.jpg.
Sekarang mari kita mulai buat CSS nya.
Image Replacement
Image Replacement merupakan sebuah teknik dimana kita mereplace text yang ada dengan image menggunakan CSS. Teknik ini berguna apabila kita menginginkan teks dengan font yang aneh ataupun text dengan efek-efek yang tidak mungkin bisa dilakukan dengan CSS.
Jika anda perhatikan pada setiap menu, ada tag <span> didalamnya. Nah tag <span> ini yang akan kita manfaatkan. Jadi kita melebarkan ukuran tag <span> ini sebesar gambar menunya untuk menutupi text yang sebenarnya. Pertama-tama kita pasang CSS default dulu untuk melayout tampilan agar lebih menarik.
body { font-family:arial, serif;}#container { border:1px solid #ffbc58; padding:10px; background:#ffe9c8;}
Anda tentu sudah tahu fungsi CSS diatas, kita hanya memberikan font jenis arial untuk <body> dan memberi border serta background untuk #container. Tambahkan CSS berikut ini.
ul { list-style:none; margin:0; padding:0;}#topmenu { height:30px;}#topmenu li { float:left; position:relative;}
Pada CSS tersebut kita menghilangkan padding dan margin serta bullet (list-style:none;) pada tag <ul>. Kemudian untuk #topmenu (sebenarnya sama aja, #topmenu itu sama dengan <ul>, tapi saya lebih senang memisahnya) kita berikan tinggi 30px height:30px;. Jangan lupa untuk <li> nya kita beri float:left; agar menu nya kesamping. Serta position:relative; yang akan berguna untuk animasinya yang akan saya jelaskan belakangan.
Jika anda lihat maka menunya telah menyamping dan dempet-dempet. Sekarang mari kita ubah menjadi images dengan teknik Image Replacement. Kita akan mengubah menu home nya terlebih dahulu, dan jika anda lihat pada kode HTML nya, pada bagian home id nya menu_1. Tambahkan CSS berikut ini:
#menu_1{ width:70px; height:30px; float:left; font-size:1.2em; position:relative;}#menu_1 span{ background:url(menu_1.jpg) no-repeat; position:absolute; width:100%; height:100%; cursor:pointer;}
Hasilnya menjadi seperti ini. Jika anda lihat kita menentukan width dan height untuk menu_1. Jika anda lihat gambar menu_1.jpg diatas mungkin anda bertanya-tanya, width nya memang benar 70px tapi height nya kan 60px? kenapa di CSS nya height nya 30px? Ya karena yang ingin kita tampilkan adalah 30px bagian atas. 30px bagian bawah kita tampilkan waktu hover.
Pada #menu_1 span kita beri background yang berisi images dari menu_1.jpg dan jangan lupa position:absolute; agar <span> kita menutupi text nya. Karena kita beri position:absolute; maka container dibawahnya kita beri position:relative;. Untuk tinggi dan lebar <span> kita beri 100% agar sesuai container dibawahnya. Jangan lupa tambahkan cursor:pointer agar di browser IE mousenya berubah. Begitulah kira-kira trik Image Replacement. Mudah kan, lakukanlah hal yang sama untuk menu sisanya, tentu saja width nya berbeda. Tambahkan kode CSS berikut ini untuk menu lainnya.
#menu_2{ width:91px; height:30px; float:left; font-size:1.2em; position:relative;}#menu_2 span{ background:url(menu_2.jpg) no-repeat; position:absolute; width:100%; height:100%; cursor:pointer;}#menu_3{ width:103px; height:30px; float:left; font-size:1.2em; position:relative;}#menu_3 span{
background:url(menu_3.jpg) no-repeat; position:absolute; width:100%; height:100%; cursor:pointer;}
Image Sprites
Sekarang kita buat efek hovernya dimana kita di hover menggeser images kita 30px kebawah agar yang tampil adalah images yang lain. Teknik seperti ini kalau orang bule nyebutnya Images Sprites. Jika anda perhatikan pada gambar tombol diatas maka pada setiap gambar dibawahnya ada efek hover nya. Nah untuk memindahkan backgroundnya kita gunakan background-position. Tambahkan kode CSS ini.
#topmenu a:hover span { background-position:0 -30px;}
Mudah kan? dan hasilnya seperti ini. Tapi jika anda coba buka di IE 6, ketika kita melakukan hover maka efeknya berjalan tetapi jika kita sudah tidak dihover gambarnya tetap, tidak berubah. Terus bagaimana? Jangan pernah anda salahkan browsernya, yang salah tentu yang membuat kodenya, yaitu kita. Tapi tenang saja akan kita perbaiki. Itu hanya masalah status pada <a> dimana IE 6 menganggap bahwa kita pada posisi visited dan focus. Tenang saja tidak usah panik tambahkan CSS berikut ini:
a,a:link,a:visited,a:hover { color:#ff9800; text-decoration:none; }a:focus,a:hover { text-decoration:underline;}
DIV
Kemarin, saya sudah menulis tentang bagaimana kode CSS dalam sebuah halaman . Sekarang, akan dilanjutkan penggunaan ID dan Class.
Sekarang, mari kita lihat kode dibawah ini.
<div>ini cuma div saja</div><div class="satu">masih kelas satu? yg bener aja :D</div><div id="dua">punya id satu doang ?</div>
Pada kode diatas, terlihat sangat jelas, baris pertama, atribut dari tag div tidak ada sama sekali. Baris kedua, ada attribut class, dan baris ketiga adalah id.
Dan coba lihat kode CSS dibawah ini
div { font-weight:bold; }.satu { color:#FF0000; }#dua { color:#0000FF;border:1px solid #000; }
Penggunaan ID dan Class
Secara umum, dari kode-kode yang sudah saya tulis diatas, bisa ditarik kesimpulan. Jika sebuah elemen menggunakan atribut class, maka dihalaman CSS dituliskan dengan tanda titik sebelum nama class (lihat class satu). Dan peggunaan atribut ID dituliskan dengan tanda # sebelum nama ID (lihat ID dua).
Peraturan umum, penggunaan class boleh digunakan berulang kali dalam satu dokumen. Sedangkan penggunaan ID hanya diperbolehkan satu kali saja digunakan dalam satu dokumen.
Dengan menggunakan atribut ID, maka anda juga bisa bermain-main dengan javascript, itu adalah kelebihannya. Atribut ID sendiri muncul sebelum adanya CSS, jadi, sama sekali tak berpengaruh ada atau tidak adanya CSS, atribut ID sudah dibutuhkan untuk identifikasi elemen.
Jadi, jika memang tak ada kebutuhan dengan javascript, anda tak perlu menggunakan ID sama sekali. Cukup menggunakan atribut class. Tapi alangkah baiknya, jika dalam penggunaan CSS, untuk memudahkan menulis dan merubah template, ada baiknya tetap menggunakan ID.
Hilangkan px untuk nilai 0
Oke, katakanlah anda memiliki kode CSS seperti ini:
.box {border-top:10px;border-left:0px;padding:0px;}
px disini berarti satuannya pixel dan kita harus menuliskannya, tetapi ternyata ada pengecualian untuk angka 0 (angka 0 saja) jadi kita bisa menuliskannya seperti ini:
.box {border-top:10px;border-left:0;padding:0;}
Ya, angka 0 tidak perlu menggunakan px, ini berarti kita memperkecil sedikit ukuran file CSS kita :)
Menyingkat perintah di CSS
Kita bisa menyingkat yang sudah disingkat. Sudah singkat tapi masih bisa disingkat lagi? Nggak masuk akal.. Bisa. Perhatikan contoh berikut ini:
.box {border-top:10px;border-left:20px;border-right:20px;border-bottom:10px;padding-top:0;padding-bottom:0;padding-left:15px;padding-right:15px;}
Oke, jika kode diatas disingkat maka hasilnya seperti ini:
.box {border:10px 20px 10px 20px;padding:0 15px 0 15px;}
Dan karena nilai atas dan bawah serta kiri dan kanan nya sama. Maka bisa disingkat lagi menjadi:
.box {border:10px 20px;padding:0 15px;}
Sip kan.. Ingat ini hanya berlaku jika nilai atas dan bawah serta kiri dan kanan sama.
Menengahkan objek
Anda ingin menengahkan suatu objek, misal images atau div. Gampang gunakan saja auto pada margin. Perhatikan contoh berikut ini:
#content{width: 600px;margin: 0 auto;}
auto disini berarti kita membiarkan CSS mendeteksi lebar kiri dan kanan secara otomatis berdasarkan lebar layar. Maka otomatis hasilnya akan ketengah. Tidak berlaku jika kita ingin menengahkan secara vertikal.
Bagaimana menarik bukan? itu baru sebagian kecil, dan masih banyak lagi rahasia dan trik CSS yang perlu diketahui.
