PANDUAN RINGFKASAN CSS
OK, CSS salah satu materi yang wajib kita kuasai sebagai web designer, karena dengan menggunakan CSS, kita bisa membangun sebuah web dengan rancangan desain yang efektif dan fleksibel. Dengan CSS, kita tidak memanipulasi desain dari suatu elemen HTML dengan menambahkan atribut di tag tersebut, melainkan dengan menambahkan class/id tertentu ke dalam tag yang sudah kita tentukan dengan style yang sudah kita definisikan di CSS…
OK, CSS salah satu materi yang wajib kita kuasai sebagai web designer, karena dengan menggunakan CSS, kita bisa membangun sebuah web dengan rancangan desain yang efektif dan fleksibel. Dengan CSS, kita tidak memanipulasi desain dari suatu elemen HTML dengan menambahkan atribut di tag tersebut, melainkan dengan menambahkan class/id tertentu ke dalam tag yang sudah kita tentukan dengan style yang sudah kita definisikan di CSS…
Kali
ini kita akan membuat sebuah layout untuk halaman web yang akan kita
buat. Di tutorial ini, kita tidak menggunakan framework, karena materi
CSS tidak membutuhkan framework PHP, jadi tidak menggunakan framework
pun web kita sudah bisa memakai layout dengan CSS.
Persiapan
Kita akan membuat 2 buah file, yaitu
index.php dan style.css dengan nama folder root misalnya web_css, jadi URL yang akan kita gunakan untuk tutorial ini adalah http://localhost/web_css.
Saya
tidak akan menjelaskan bagaimana setting XAMPP atau paket server Apache
lainnya di tutorial ini, karena kita sekarang akan fokus ke layouting
dengan menggunakan CSS.
Catatan
- Tidak ada satupun kode PHP di tutorial ini, jadi Anda tidak perlu khawatir bila Anda belum menguasai PHP
- Anda bisa pula mengganti file
index.phpdengan ekstensi html, menjadiindex.html
Buatlah sebuah file
index.php dengan isi sebagai berikut:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tutorial CSS Layout | Harian Cheyuz</title>
</head>
<body>
</body>
</html>
Simpan file di atas di
http://localhost/web_css/index.php
Nah,
menurut pengalaman saya, supaya styling bisa dipakai di berbagai
browser, Anda harus menambahkan doctype yang ditambahkan sebelum tag
html, sehingga isi file tersebut menjadi sebagai berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tutorial CSS Layout</title>
</head>
<body>
</body>
</html>
Mengapa
demikian? karena doctype adalah instruksi untuk web browser tentang
versi dari markup language (HTML) yang ada di halaman tersebut. Di sini
kita menambahkan doctype untuk mendefinisikan bahwa versi dari markup
language di halaman ini adalah XHTML, sehingga semua browser dapat
membaca style yang sama.
Fixed Layout
Contoh
di sini adalah layout fixed/ice, yang artinya lebar dari halaman web
ini adalah tetap dan tidak akan berubah. Misalnya kita mendefinisikan
lebar website kita adalah 950px, maka ketika kita melihat web dengan
resolusi komputer yang berbeda layout web tersebut tidak akan berubah.
Jadi ketika di lihat di monitor dengan resolusi tinggi, web kita akan
terlihat kecil, sedangkan di monitor dengan resolusi rendah, web kita
terlihat besar. Jadi tergantung resolusi dari monitor, bukan tergantung
dari lebar window browser.
Membuat Layout 2 Kolom
Anda
mengerti maksudnya? ya, untuk tutorial ini kita akan membuat halaman
web dengan layout 2 kolom, karena akan terdapat sidebar di sebelah kiri
dan ruang untuk konten di sebelah kanan.
Layout
2 kolom itu adalah layout standar yang biasa digunakan untuk blog. Coba
Anda buat blog baru di wordpress atau blogger, pasti layout defaultnya
adalah 2 kolom, yaitu konten di sebelah kiri dan sidebar untuk
kategori/arsip di sebelah kanan.
Untuk
tutorial berikutnya, saya akan membuat untuk layout 3 kolom, jadi
terdapat 2 sidebar, di kiri dan di kanan,, coming soon ya, hehe.. 
Pembagian Area
Pada
tutorial kali ini, satu halaman website terdapat 4 bagian ‘area’ utama
yang dibuat dengan tag ‘div’, yaitu header, sidebar, content, dan
footer. Masing-masing div diberi atribut id dengan nama sesuai dengan
nama area, misalnya id=”header” untuk div header, dan seterusnya.
Supaya lebih jelas, ayo kita langsung buat kode HTMLnya, tambahkan kode berikut di dalam tag ‘body’ yang ada di dalam file
index.php:...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
...
Sejauh
ini, kita sudah membuat 4 area utama dalam halaman web kita dan
‘terbungkus’ oleh div yg mempunyai id=”wrapper”, wrapper hanya istilah
saja, karena fungsinya sebagai container untuk layout ice/fixed,
sehingga wrapper ini kita tentukan lebar dan tinggi fix-nya, dan
nantinya kita tentukan tinggi, lebar, dan posisi untuk keempat area
tersebut di dalam file CSS. Secara default bila kita refresh halaman
tersebut, maka sebenernya terdapat 4 tumpukan div dari atas ke bawah
secara berurutan. Karena kita belum mengisikan apa2, maka tumpukan
tersebut tidak akan terlihat, karena berupa container gaib (div) halah
gaib haha..
Dummy Text
Sekarang
kita buat dummy text untuk setiap area yang sudah kita buat supaya
setiap area terdapat isi sample text. Dummy text adalah sekumpulan
kata/kalimat sebagai contoh untuk dijadikan bahan percobaan untuk
layout yang kita buat, coba Anda buka http://lipsum.com, di situ terdapat contoh dummy text Lorem Ipsum.
Header
Untuk header, tambahkan teks judul kita yang berupa link, seperti berikut:
<div id="header">
<a href="http://localhost/web_css"><h1>Tutorial CSS Layout</h1></a>
</div>
Sidebar
Untuk
sidebar, kita buat contoh menu, ini hanya pemisalan aja, supaya kita
bisa melihat bentuk menu yang akan kita tentukan di CSS.
Tambahkan kode html berikut di dalam div sidebar.
<div id="sidebar">
<h3>Menu</h3>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
Content
Untuk konten, isikan saja paragraf lorem ipsum supaya kita ga capek mengetik contoh kalimat, hehe… kunjungi http://lipsum.com
<div id="content">
<h2>Selamat Datang</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae semper arcu. Fusce condimentum ultrices elementum.
Maecenas adipiscing ullamcorper ante, in viverra velit imperdiet at.
Nam sollicitudin consectetur tincidunt.
Nam venenatis nunc ut sapien pellentesque venenatis.
Donec in risus elit. Duis nec lectus quam.
Pellentesque velit elit, iaculis in pharetra nec, posuere in nulla.
Nunc et nulla eu metus interdum scelerisque.
Nunc ultricies suscipit ligula, non vulputate nunc semper malesuada.
Maecenas id euismod leo. Praesent vitae lectus sapien, id mattis eros.
Integer non nulla felis, in pellentesque nunc.
Mauris convallis dui in dui adipiscing tempor.
Donec ornare sapien sed nisi adipiscing gravida.
Nam volutpat pharetra lectus, euismod fermentum ipsum mollis quis.</p>
</div>
Footer
Terakhir untuk footer, tambahkan aja copyright untuk website kita, misalnya copyright © 2010 by Cheyuz, kode lengkapnya:
<div id="footer">
<p>Copyright © 2010 by Cheyuz</p>
</div>
Sekarang, tambahkan tag berikut sebelum tag ‘body’ yang berfungsi untuk meload file
style.css yang akan kita buat nanti.
Nah, jadi kode HTML lengkap untuk file index.php adalah sebagai berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Tutorial CSS Layout</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="http://localhost/web_css"><h1>Tutorial CSS Layout</h1></a>
</div>
<div id="sidebar">
Menu
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<div id="content">
<h2>Selamat Datang</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec vitae semper arcu. Fusce condimentum ultrices elementum.
Maecenas adipiscing ullamcorper ante, in viverra velit imperdiet at.
Nam sollicitudin consectetur tincidunt. Nam venenatis nunc ut
sapien pellentesque venenatis.
Donec in risus elit. Duis nec lectus quam. Pellentesque velit elit,
iaculis in pharetra nec,
posuere in nulla. Nunc et nulla eu metus interdum scelerisque. Nunc
ultricies suscipit ligula, non
vulputate nunc semper malesuada. Maecenas id euismod leo. Praesent vitae
lectus sapien, id mattis eros.
Integer non nulla felis, in pellentesque nunc. Mauris convallis dui in
dui adipiscing tempor. Donec ornare
sapien sed nisi adipiscing gravida. Nam volutpat pharetra lectus,
euismod fermentum ipsum mollis quis.</p>
</div>
<div id="footer">
<p>Copyright © 2010 by Cheyuz</p>
</div>
</div>
</body>
</html>
Preview
Bila Anda mengikuti langkah2 di atas dengan benar, maka hasilnya sesuai dengan tampilan yang ada di sini.
Nah,
kasus di sini adalah layout Anda masih belum diberi style, posisi yang
belum benar, pewarnaan belum ada, tinggi dan lebar yang belum
didefinisikan, dan sebagainya, sekarang ayo kita buat CSSnya supaya
benar2 sesuai dengan yang kita inginkan.
style.css
Setelah kita mengikuti langkah di atas untuk membuat isi dari halaman web (file
index.php), sekarang kita buat style-nya dengan menghubungkan file index.php dengan style.css..
Buatlah file
style.css satu folder dengan file index.php.1. Default Style
Ga
tau istilahnya apa, saya kasih istilah default style, yaitu style
default untuk semua elemen/tag yang ada di halaman web, biasanya
default style itu untuk jenis font, ukuran font, warna default, dan
sebagainya. Penggunaannya dengan menambahkan karakter * di dalam file
css sebagai variable.
*{ font-size: 12px; font-family: sans-serif; }
Coba
Anda save, kemudian refresh browser.. maka jenis hurufnya akan berubah
menjadi sans serif dan dengan ukuran 12px. Untuk judul, akan kita ubah
ukurannya nanti.
2. Tag Styles
Tag
style adalah tag yang diterapkan pada setiap tag dengan nama tag yang
sesuai dengan variable yang didefinisikan di CSS.. misalnya untuk
setiap h1, style hurufnya harus besar, tebal.. style untuk paragraf,
misalnya harus alignment justify, ukuran hurufnya 12px, dan sebagainya.
Tambahkan syntax CSS tadi dengan syntax di bawah ini:
body{ backgroung: #efefef; margin: 0; } a{ text-decoration: none; color: black; } a:hover{ text-decoration: underline; color: #0000cc; } h1{ font-size: 36px; margin: 0; } h2{ font-size: 24px; }
Arti dari syntax tersebut adalah:
- background untuk tag ‘body’ secara default warna putih agak keabuan (#efefef) dan tidak ada margin
- untuk semua hyperlink, warna hitam dan tidak ada garis bawah
- hover, ketika mouse melewati setiap hyperlink, maka muncul garis bawah, dan warnanya menjadi biru tua
- Ukuran setiap h1 adalah 36px, dan setiap h2 adalah 24px
3. Layouting & Theming
Nah,
ini yang paling penting, layouting dan theming. Layouting dan Theming
adalah pendefinisian posisi untuk tata letak, warna, dan ukuran dari
setiap tag div.
Pertama
kita tambahkan style untuk div yang mempunyai id=”wrapper”, jadi
variable di CSSnya dengan ditambahkan awalan karakter pagar (#).
#wrapper{ width: 950px; margin: auto; background: #fff; }
Syntax
di atas adalah style untuk div yang mempunya id=”wrapper”. Dengan
syntax di atas, Anda mengubah lebar wrapper menjadi fix 950 pixel,
dengan margin auto yang berarti wrapper akan selalu berada di tengah2,
dan mempunyai background berwarna putih, silakan refresh untuk hasilnya.
#header{ height: 150px; background: #cdf; }
Dengan
syntax di atas, Anda telah membuat banner yang mempunyai tinggi 150
pixel dan warna background biru muda. Silakan direfresh!
#sidebar{ float: left; width: 200px; border-right: 1px solid #ccc; padding: 5px; }
Terlihat
di kode di atas ada properti float, itu adalah untuk menentukan posisi
untuk sidebar menjadi di sebelah kiri, untuk pembahasan float dan
posisi lainnya di CSS, baca Pemahaman Position pada CSS,
kemudian sidebar mempunyai lebar 200 pixel, dan ditambahkan padding 5
pixel untuk memberikan jarak dari text yang ada di dalam sidebar ke
pinggiran ruang. refresh!
#content{ float: left; width: 700px; padding: 5px 5px 5px 20px; border-left: 1px solid #ccc; }
Untuk
content, diberi float left, karena bertahap, bertumpuk dari kiri,,
mempunyai lebar 700 pixel, dan mempunyai padding untuk atas, kanan, dan
bawah 5 pixel, sedangkan untuk sebelah kiri 20 pixel untuk memberikan
jarak terhadap pinggiran konten sebelah kiri, sehingga terlihat seolah2
garis pinggir di sebelah kiri yang berwarna abu2 adalah pemisah antara
content dan sidebar.
#footer{ clear: both; background: #bbb; } #footer p{ text-align: center; padding: 20px; color: #fff; font-size: 10px; font-weight: 900; }
Untuk
footer, saya memberi clear both, yang artinya membersihkan dari
float-float yang ada di atasnya, yaitu sidebar dan content, jika kita
tidak memberi clear, maka jika kita menambahkan div di bawah footer,
maka penumpukan menjadi kacau, tetapi jika memakai clear, posisi
kembali menjadi baru seperti header (posisi footer = header = tidak 2
kolom). Untuk warna latar, saya beri background abu tua (#bbb).
Nah,
terlihat di syntax itu ada “#footer p”, itu maksudnya adalah style
untuk paragraf (p) yang hanya ada di footer, selainnya tidak. Khusus
untuk p yang ada di footer, alignmentnya justify, kemudian warna putih,
ukurannya 10 pixel dan tebal, kemudian diberi padding 20 pixel supaya
jarak ke pinggiranya tidak terlalu rapat.
Nah, jadi syntax lengkap CSSnya adalah seperti berikut:
*{ font-size: 12px; font-family: sans-serif; } body{ background: #efefef; margin: 0; } a{ text-decoration: none; color: black; } a:hover{ text-decoration: underline; color: #0000cc; } h1{ font-size: 36px; margin: 0; } h2{ font-size: 24px; } #wrapper{ width: 950px; margin: auto; background: #fff; } #header{ height: 150px; background: #cdf; } #sidebar{ float: left; width: 200px; padding: 5px; } #content{ float: left; width: 700px; padding: 5px 5px 5px 20px; border-left: 1px solid #ccc; } #footer{ clear: both; background: #bbb; } #footer p{ text-align: center; padding: 20px; color: #fff; font-size: 10px; font-weight: 900; }
