Cascading Style Sheets atau CSS adalah suatu bahasa lembar gaya yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markah. 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 biasanya 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 markah 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.
Sekilas mengenai CSS, sekarang kita akan membuat desain layout dengan memanfaatkan division pada CSS.
Pertama, yang kita butuhkan adalah 2 buah file yang berbeda, yaitu file berekstensi .css dan file .html.
Contohnya, kita akan membuat file layout.css. Yang dibutuhkan dalam halaman web biasanya adalah header, footer, sidebar, maupun content-content yang terbagi-bagi sesuai dengan keinginan. Di sini kita bisa mengatur tata letak dari masing-masing content. Scriptnya seperti di bawah ini:
#wrapper {
margin:auto;
width:980px;
height:600px;
border:2px solid black;
}
#header {
height:80px;
border:1px solid blue;
}
#inner {
float:left;
margin:5px 0;
border:1px solid black;
}
#footer {
clear:both;
height:50px;
border:1px solid blue;
}
#sidebar {
float:left;
margin-right:10px;
width:200px;
height:400px;
border:1px solid gray;
}
#content {
float:left;
width:760px;
height:400px;
border:1px solid red;
}
#content-top {
clear:both;
margin:auto;
width:760px;
height:120px;
border:1px dotted red;
}
#content-main {
float:left;
margin:auto;
width:480px;
height:260px;
border:1px dotted red;
}
#content-right {
float:right;
margin:auto;
width:260px;
height:180px;
border:1px dotted red;
}
Setelah disimpan di dalam layout.css, baru kita membuat index programnya. Untuk contoh programnya bisa seperti di bawah ini.
<!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" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="content">
<div id="content-top">
Top Content
</div>
<div id="content-main">
Main Content
</div>
<div id="content-right">
Right Content
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Kemudian simpan file dengan nama index.css. Perlu diperhatikan, dalam pemanggilan file css, harus sama dengan nama file css. Begitu juga dengan pemanggilan style, harus sesuai dengan nama style.
Bentuk layout web sederhana tersebut bisa dijadikan dasar pembuatan web yang sebenarnya. Tinggal men-generate image dan isinya di masing-masing division. Selanjutnya akan dibahas di modul berikutnya.
Selamat mencoba... :-)
Said
Terimakasih Tutorialnya Mas Endra, salam kenal saya rofiq azha dari UIN. Tertarik membuat website dengan css. (www.rofiq-azhari.com)
Said
sory gan, itu index.css atau index.php?