Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Inline: properti style diterapkan secara langsung per baris atau perelemen HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division.
Berikut ini merupakan contoh desin web yang menggunakan CSS
untuk langakah pertama membutuhkan linked CSS dan HTML. Buka notepad terus tulis script berikut ini :
#wrapper {
margin: auto;
width: 1000px;
padding:5px 2px 5px 2px;
border: 1px solid green;
}
#header {
height: 100px;
margin-bottom:5px;
border: 1px solid blue;
}
#inner {
margin: auto;
border: 1px solid green;
}
#sidebar {
float: left;
width: 200px;
height: 390px;
border: 1px solid blue;
}
#top {
float: right;
width: 750px;
height: 390px;
border: 1px solid green;
}
#content {
height: 100px;
border: 1px solid blue;
}
#isi{
float: left;
width: 400px;
height:220px;
border: 1px solid green;
}
#info {
float: right;
width: 235px;
height: 150px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
kemudian buka notepad lagi dan tuliskan list dibawah ini:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tugas2 Desain Layout sederhana </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="top">
<div id="content">
Gambar atas
</div>
<div id="isi">
Isi
</div>
<div id="info">
Info
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Simpan file tersebut dalam satu folder dengan file.css yang sudah ada, misalnya dengan nama style.html
Berikut hasil dari kedua list diatas:
Untuk membuat desain web menggunakan css diperlukan list layout dasar sperti diatas.
Selain itu menambahkan list lagi yang diperlukan untuk tampilan dari desain web tersebut.
Dibawah ini contoh list untuk desain web.
#wrapper {
margin: auto;
width: 1000px;
background-color:#C00;
padding: 5px 2px 5px 2px;
}
#header {
height: 100px;
background-color:#03C;
}
#header1 {
height: 20px;
text-align:right;
padding-right: 10px;
color:#FFF;
}
#header2 {
height: 35px;
color:#FF0;
}
#header3 {
height: 25px;
text-align:right;
color:#FFF;
padding-right: 10px;
}
#inner {
margin:auto;
}
#sidebar {
float: left;
width: 200px;
height: 400px;
background-color:#399;
}
#top {
float: right;
width:800px;
height: 400px;
}
#content {
height: 100px;
}
#isi {
float: left;
width: 580px;
padding-left: 10px;
height: 300px;
background-color:#6C6;
}
#info {
float: right;
width: 200px;
height: 300px;
padding-left: 10px;
background-color:#666;
}
#footer {
clear: both;
height: 50px;
color:#FFF;
background-color:#00C;
}
#leftmenu ul {
width: 200px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #0FF no-repeat left center;
margin: 0px 0px 1px; color: #000;
}
#leftmenu a:hover {
background: #0F0 no-repeat left center; color: #FFF;
}
Simpan file diatas dengan nama terserah contoh desain.css
kemudian buat lagi list seperti dibawah ini:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tugas2 Desain Layout Sederhana</title>
<link rel="stylesheet" href="desain.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="gambar1.jpg" width="104" height="97" align="left" />
<div id="header1">Home | Profil | Contact | About My</div>
<div id="header2">
<h1>Cah_0353 Desain </h1>
</div>
<div id="header3">Search
<input type="text" />
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li><strong><a href="#">Profil</a></strong></li>
<li><strong><a href="#">Tutorial</a></strong></li>
<li><strong><a href="#">Tips & Tricks</a></strong></li>
<li><strong><a href="#">Software's</a></strong></li>
</ul>
</div>
</div>
<div id="top">
<div id="content"><img src="gambar.jpg" width="800" height="102" /></div>
<div id="isi">
<h2>Kecerdasan Buatan</h2>
<p>24 Februari 2010 [23:00]<br />
Kecerdasan Buatan (bahasa Inggris: Artificial Intelligence atau AI) didefinisikan sebagai kecerdasan yang ditunjukkan oleh suatu entitas buatan. Sistem seperti ini umumnya dianggap komputer. Kecerdasan diciptakan dan dimasukkan ke dalam suatu mesin (komputer) agar dapat melakukan pekerjaan seperti yang dapat dilakukan manusia. Beberapa macam bidang yang menggunakan kecerdasan buatan antara lain sistem pakar, permainan komputer (games), logika fuzzy, jaringan syaraf tiruan dan robotika.</p>
<p>Raed more...</p>
</div>
<div id="info">
<p><strong>cetak/ekspor
</strong>
<ul>
<li>Untuk Buku</li>
<li>Sebagai PDF</li>
<li>Versi Cetak</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p align="center">
© 2010 Cah_0353.
</div>
</div>
</body>
</html>
Simpan file diatas dalam satu folder dengan file desain.css dengan nama yang anda inginkan contoh desain.html
Hasil tampilan dari list desain web diatas yakni sebagai berikut:
Gambar desain web dari list diatas.
