Belajar
CSS Dasar
CSS
singkatan dari Cascading Style Sheet . CSS
merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan
komponen-komponen web yang beragam sesuai dengan keinginan kita .
ini adalah contoh beberapa syntax untuk belajar css:
ini adalah contoh beberapa syntax untuk belajar css:
<style type="text/css">
h1{
background-color:blue;
color:white;
}
body{
background-color:purple;
color:white;
}
h1{
text-align:center;
}
p{
text-align:right;font-size:18px;font-weight:bold;color:yellow;
}
hr{
color:red;
}
</style>
dan ini masukkan syntax html tadi kedalam css seperti berikut:
<html>
<head>
<title> Latihan-1 </title>
<link href="style.css"type="text/css"rel="stylesheet" />
</head>
<body>
<h1>= || TOKO PAKAIAN SERBA MURAH ||=</h1>h1>
<p> Jl. Gratis No.008, Condong Catur, Sleman.
<br/> Yogyakarta </p>
<hr/>
</body>
</html>
A.
Mendesain Menu Vertical dengan CSS
Tag
HTML yang lengkap adalah sebagai berikut:
<html>
<head><title></title></head>
<style
type="text/css">
#container
{
width:
720px;
}
#header
{
height:
100px;
background-color:
#9FB5BD;
}
#content
{
width:
540px;
float:
left;
}
#sidebar
{
width:
180px;
float:
right;
}
#footer
{
clear:
both;
}
#nav
{
margin:
0;
padding:
0;
list-style-type:
none;
background-color:
#663300;
width:
180px;
float:
left;
}
#nav
li {
margin:
0;
padding:
0; /* yang bercetak tebal agar
tidak ada bug waktu dibuka di internet explorer
float:left;
width:100%;
}
#nav
a {
display:
block;
color:
#FFF;
text-decoration:
none;
padding:
0 15px;
line-height:
2;
border-bottom:1px
solid #FFF;
}
#nav
a:hover { /*untuk membuat efek ketika mouse berada di pilihan
tersebut*/
background:
#330000;
}
</style>
</head>
<body>
<ul
id='nav'>
<li><a
href="#">Home</a></li>
<li><a
href="services.html">Services</a></li>
<li><a
href="support.html">Suport</a></li>
<li><a
href="about.html">About Us</a></li>
<li><a
href="contact.html">Contact Us</a></li>
</ul>
</body>
</html>
B.
Mendesain Menu Horizontal dengan CSS
yaitu sama dengan yang diatas,
hanya perlu mengganti beberapa tag, yaitu:
#nav {
margin:
0;
padding 0;
background: #663300;
list-style-type: none;
float:left;
}
#nav li {
margin:
0;
padding 0;
float:left;
}
#nav a {
float:
left;
width: 127px;
text-align:center;
color: #FFF;
text-decoration:none;
line-height:2;
border-right:1px solid#FFF;
}
Tidak ada komentar:
Posting Komentar