Mendesign website menggunakan CSS merupakan suatu keharusan bagi seorang programmer web.Karena banyak sekali keuntungan yang dapat kita peroleh dari koding-koding CSS.Website kita menjadi lebih atraktif lebih menarik dan lebih ringan.CSS dapat digunakan dengan 3 cara, sesuai dengan kebutuhan anda:
• Dengan membuat link ke file Style Sheet dari file HTML. Metode seperti ini memungkinkan anda mengubah style sejumlah halaman web dengan hanya mengedit satu file Style Sheet (eksternal css).
• Dengan menyisipkan Style Sheet pada file HTML. Metode seperti ini memungkinkan anda mengubah style suatu halaman web dengan hanya mengedit beberapa baris Style Sheet (internal css).
• Dengan menyisipkan secara inline pada tag dalam file HTML. Hal ini memberi cara tercepat untuk mengubah suatu tag, sejumlah tag, atau satu blok informasi pada halaman web (inline css).
Baiklah kita coba langsung saja bagaimana mendesign website dengan css.
Buat file style.php
#container{
margin:auto;
}
#header{
margin:0 auto;
padding:10px;
height:70px;
width:950px;text-align:center;
background-color:#ECF4D0;
}
#content{
overflow:auto;
padding:10px;
margin:8px auto;
height:auto;
width:950px;
}
#right{
float:left;
width:500px;
padding:10px;
background-color:#F7F4AE;
}
#left{
float:right;
width:400px;
padding:10px;
background-color:#FCCFC9;
}
#footer{
margin:0 auto;
padding:10px;
height:30px;
width:950px;text-align:center;
background-color:#ECF4D0;
}
setelah itu buat file index.php
<html >
<head>
<title>Design Website Dengan CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
font-size: 16px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div id="container">
<div class="style1" id="header">Header</div>
<div id="content">
<div id="right">
<div align="center" class="style1">Right</div>
</div>
<div id="left">
<div align="center" class="style1">Left</div>
</div>
</div>
<div class="style1" id="footer">Footer</div>
</div>
</body>
</html>
Jika benar maka hasilnya akan seperti dibawah ini
Header merupakam tempat anda meletakan judul web anda serta logo dan lain-lain.
Right merupakan tempat anda meletakan conten atau isi website.
Left merupakan tempat anda meletakan menu atau isi website.
Silahkan modifikasi sesuai kreatifitas teman-teman.
Silahkan download contoh diatas Download sourcecode Website CSS.
