Contoh Coding di CSS
CONTOH CODING CSS
Sistem pengkodean CSS memang sangat memudahkan kita untuk membuat suatu website menjadi lebih menarik. Dengan kode CSS kita dapat merubah warna, bentuk, ukuran dan apa saja yang berkaitan dengan style website sesuai dengan kemampuan anda. Nah untuk mengetahui caranya ikuti tutorial berikut ini :
Pusing membuat coding CSS ? hahaa.
. . jangan dibikin sulit guys. Ok postingan kali ini kami akan membagikan
beberapa Coding CSS untuk kawan-kawan.
Sistem pengkodean CSS memang sangat memudahkan kita untuk membuat suatu website menjadi lebih menarik. Dengan kode CSS kita dapat merubah warna, bentuk, ukuran dan apa saja yang berkaitan dengan style website sesuai dengan kemampuan anda. Nah untuk mengetahui caranya ikuti tutorial berikut ini :
1. Pertama buka notepad
atau dreamweaver
2. Ketikkan kode HTML
dasar sebagai berikut :
<html>
<head>
<title>navbar css</title>
</head>
<body>
</body>
</html>
3. Tambahkan
<div class=”nav”>
<ul>
<li><a href=”link
anda”>Tulisan</a></li>
<li><a href=”link
anda”>Tulisan</a></li>
<li><a href=”link
anda”>Tulisan</a></li>
<li><a href=”link
anda”>Tulisan</a></li>
<div
class=”clear”></div>
</ul>
<div
class=”clear”></div>
</div>
setelah kode <body> ,
sehingga menghasilkan kode seperti dibawah :
<html>
<head>
<title>navbar css</title>
</head>
<body>
<div class=”nav”>
<ul>
<li><a href=”link
anda”>Tulisan</a></li>
<li><a href=”link
anda”>Tulisan</a></li>
<li><a href=”link
anda”>Tulisan</a></li>
<li><a href=”link
anda”>Tulisan</a></li>
<div
class=”clear”></div>
</ul>
<div
class=”clear”></div>
</div>
</body>
</html>
4. Lalu tambahkan kode
css sebagai berikut :
<style>
.nav {
Background-color: #000;
Width:100%;
Height:40px;
}
.nav ul {
List-style: none;
}
.nav ul li {
Float: left;
}
.nav ul li a {
Text-decoration: none;
Color: #fff;
Float: left;
Padding:10px;
}
.nav ul li a:hover {
Background-color: #333;
}
.clear {
Clear:both;
}
</style>
Letakan kode diatas sebelum kode </head>, sehingga akan menghasilkan
kode berikut :
<html>
<head>
<title>navbar css</title>
<style>
.nav {
Background-color: #000;
Width:100%;
Height:40px;
}
.nav ul {
List-style: none;
}
.nav ul li {
Float: left;
}
.nav ul li a {
Text-decoration: none;
Color: #fff;
Float: left;
Padding:10px;
}
.nav ul li a:hover {
Background-color: #333;
}
.clear {
Clear:both;
}
</style>
</head>
<body>
<div class=”nav”>
<ul>
<li><a href=”link
anda”>Tulisan</a></li>
<li><a href=”link
anda”>Tulisan</a></li>
<li><a href=”link
anda”>Tulisan</a></li>
<li><a href=”link
anda”>Tulisan</a></li>
<div
class=”clear”></div>
</ul>
<div
class=”clear”></div>
</div>
</body>
</html>
Ok
Stop, sampe sini postingan kali ini. Bagi yang sudah mencoba dan masih
salah-salah, harap periksa kembali ya. Saran dari saya, coding di atas jangan
di copy paste tapi di ketik ulang guys, fungsinya supya anda lebih mahir
nantinya, sudah biasa tanpa di copy paste. Tapi kaau mau di copy paste juga
tidak apa ko haahaa. Ok see you the next time. Terima kasih sudah berkunjung.
Posting Komentar untuk "Contoh Coding di CSS"