Cascading Style Sheets (CSS)

CSS adalah kepanjangan dari Cascading Style Sheets, yaitu sebuah halaman terpisah dari halaman web yang dipergunakan untuk pengaturan komponen style seperti font, warna, layout dan sebagainnya. pembuatan web seperti dibawah ini menggunakan css sebagai pengaturan diluar kode html itu sendiri.
Untuk tahap awal, kita dapat belajar membuat desain layout yang sederhana seperti contoh di bawah ini:





Kode CSSnya:

#wrapper { margin: auto;
width: 750px;
border: 1px solid red;
}

#header {
height: 80px;
border: 1px solid blue;
}

#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}

#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}

#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}

#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}


Kemudian untuk kode HTMLnya:

<!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>Desain Layout Sederhana</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />

</head>

<body>

<div id="wrapper">
<div id="header">
Header
</div>

<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="content">
Content
</div>
</div>

<div id="footer">
Footer
</div>

</div>

</body>

</html>


Setelah berhasil membuat desain layout yang sederhana, kali ini kita belajar membuat desain web sederhana yang juga memanfaatkan CSS. Contoh web sederhana yang dapat dibuat adalah sebagai berikut:




Kode CSSnya:
* { margin: 0; }
body { margin:5px auto; padding:0; font:0.72em/150% arial; }
#wrapper
{ margin:auto;
width:980px;}
#header
{ height:80px;
margin:0px auto;
background:#000;}
#header-content
{height:70px;
margin:auto;
background:#fff url(orange.jpg);}
#menu-top
{ font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;}
#logo
{ float:left;
margin:10px 10px 10px 50px;
height:50px;}
#site-title h2
{ float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'Verdana';
font-weight:
bold;}
#search
{ clear:right;
float:right;
margin:20px 50px 0px auto;
height:30px;
font-weight:bold;}
#inner
{ float:left;
margin:0px;}
#footer
{ clear:both;
height:60px;
background:#99FF33;}
#footer p { text-align:center;}
#sidebar
{ float:left;
width:200px;
height:400px;
background-color:#FFCC66}
#content
{ float:right;
width:780px;
height:400px;
background:#FFF}
#content-top
{ clear:both;
margin:auto;
width:780px;
height:170px;
background-image:url(gambar.JPG)}
#content-main
{ float:left;
margin:auto;
width:480px;
height:240px;}
#content-main p, h3
{ padding: 10px 20px 0px 20px;
text-align:justify;}
.style1 {font-size:x-small}
#content-main hr{ width:440px;
color:#FF9900;
margin: 10px 20px 0px 20px;}
#content-right
{ float:right; margin:10px auto; width:260px;
border: 2px solid green; background:#99FF33}
#content-right h3{ padding: 10px 20px 0px 20px;
text-align:justify;}
#content-right ul{ padding: 10px 20px 20px 40px;
list-style:square;}
#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:#6cae15 no-repeat left center; margin: 0px 0px 1px; color:#000 }
#leftmenu a:hover { background:#5e9711 no-repeat left center; color:#fff}


Dan Kode HTMLnya:

<!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">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="logo1.jpg" width="50"/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Presentasi dari TecQuipment Ltd, UK</h3>
<hr />
<p class="style1">
Selasa, 02 Maret 2010
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, set do tempura nan de baskai lian tia we sio kun
Lorem ipsum dolor sit amet, consectetur adipisicing elit, set do tempura nan de baskai lian tia we sio kun [...]
</p>
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Lomba Panjat Tiang Listrik</a></li>
<li><a href="#">Lomba Tarik Kabel</a></li>
<li><a href="#">Balap Karung 10 KM</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>&#169; 2010 Teknik Elektro UM. Malang, Indonesia.</b></p>
</div>
</div>
</body>
</html>


Semoga pembelajaran ini dapat bermanfaat bagi siapa saja yang membaca. Selamat mencoba…..

Comments :

0 komentar to “Cascading Style Sheets (CSS)”

Posting Komentar

My Blog List

Followers

Homepage Bottom Left Widget

Homepage Bottom Middle

Homepage Bottom Right Widget