CSS, merupakan singkatan dari Cascading Style Sheet
Cara membuat file CSS harus berekstensi .CSS
Bisa dibuat di Notepad, Notepad ++, Macromedia Dreamweaver...
Berikut syntax dari CSS...
Cara Merubah Posisi Gambar
<html>
<head>
<style type="text/css">
body
{
background-image:url('anwari.jpg');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Assalamualaikum</h1>
<p>anwari-kyu1.blogspot.com</p>
<p>Muhammad Anwari</p>
</body>
Tampilan Gambar
<html>
<head>
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="gambar1.html"><img src="gambar1.jpg" alt="anwari" width="110" height="90" /></a>
<div class="desc">Contoh Gambar1</div>
</div>
</body>
</html>
Style Navbar Type Vertical
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Profil</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
0 Komentar:
Posting Komentar