Cascading Style Sheet (CSS)merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Contoh Penggunaan CSS:
<html>
<head>
<title>belajar html</title>
<style type="text/css">
body{
background:#f1f1f1;
margin:0 auto;
color:#333;
padding:20px 0;
}
table, tr, th, td, hr{
outline:none!important;
border:none!important;
}
hr{
height:0;}
h1{
text-transform:uppercase;
}
h3{
font-size:19px;
background:#ddd;
text-transform:uppercase;
border-bottom:2px groove #ddd;
text-align:left;
padding:10px 5px;
color:#555;
}
.list{
background:#ccc;
display:block;
height:40px;
padding:0 0 4px 20px;
}
.list ul{
list-style:none;
margin:0;
padding:0;
clear:both;
display:block;
}
.list ul li{
float:left;
padding:0;
margin:0;
}
.list ul li a,
.list ul li a:link,
.list ul li a:visited{
text-decoration:none;
display:block;
padding:12px 14px;
background:#ccc;
border-left:1px solid #ddd;
color:#444;
}
.list ul li a:hover,
.list ul li a:active{
background:#aaa;
color:#222;
}
.list ul li ul{
width:120px;
display:none;
margin:0;
position:absolute;
}
.list ul li:hover ul{
display:block;
}
.list ul li ul a{
width:120px;
border-top:1px solid #ddd;
}
.sideleft,
.sideright{
background:#ededed;
}
.sideleft ul,
.sideleft ol,
.sideright ol,
.sideright ul{
list-style:none;
margin:0;
padding:0;
text-align:left;
}
.sideleft ul li,
.sideleft ol li,
.sideright ol li,
.sideright ul li{
padding:5px 0 0 10px;
border-bottom:1px solid #ccc;
text-transform:capitalize;
margin:0 4px;
}
.footer{
border-top:2px groove #ddd;
background:#d1d1d1;
padding:20px 0;
}
.footer p{
text-align:right;
padding:0 20px 0 0;
}
.footer p small{
font:normal 12px verdana;
text-transform:lowercase;
}
.content{
color:#454;
background:#d5d5d5;
}
.content h2{
font:normal bold 20px arial;
text-transform:uppercase;
border-bottom:2px groove #ccc;
text-align:center;
padding:9px 0;
}
.content p{
margin:0 7px;
padding:0;
font:normal normal 16px georgia;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tr>
<th class="header" colspan="3" width="100%" height="80px" bgcolor="ff0000">
<h1><font face="Arial Black;">judul halaman</font></h1>
</th>
</tr>
<tr>
<td colspan="3" width="100%">
<div class="list">
<ul>
<li><a href="http://google.com">google</a></li>
<li><a href="http://facebook.com">facebook</a></li>
<li><a href="http://wikipedia.org">wikipedia</a></li>
<li><a href="http://detik.com">detikcom</a></li>
<li><a href="http://kaskus.us">kaskus</a></li>
<li><a href="http://youtube.com">youtube</a></li>
</ul>
</div>
</td>
</tr>
<tr valign="top">
<td class="sideleft" width="25%" align="center">
<h3>sidebar kiri</h3>
<hr />
<ol>
<li>bagian side bar</li>
</ol>
</td>
<td class="content" width="75%">
<h2>content</h2>
<hr />
<p>Belajar CSS</p>
<p>Ini contoh halaman menggunakan CSS</p>
<blockquote>
<p><code>
ini tag blockquote dan code<br />
</code>
</p>
</blockquote>
</td>
</table>
</body>
</html>
Screen shoot :
Thank's budy :3
ReplyDeletei can finish my homework
you're welcome bro, thank's for come to my blog
ReplyDelete