Dasar-dasar CSS




CungukBlogger~CSS (Cascading  Style  Sheet)  sesuai  dengan  namanya  berfungsi  untuk  menambahkan  style  pada halaman web, sehingga tampilan website menjadi lebih indah. CSS ini sebetulnya mengambil dari tag html yang sebelumnya ada. Penulisan CSS, bisa dideskrispsikan seperti ini, diletakkan didalam tag head:

<style type="text/css">
h1 { font-size: x-large; font-weight: bold }
h2 { font-size: large; font-weight: bold }
</style>
Contoh implementasinya :
<html>
<head>
<title>Contoh CSS</title>
<style type="text/css">
h1 { font-size: x-large; font-weight: bold ;color:red }
h2 { font-size: large; font-weight: bold }
</style>
</head>
<body>
<h1>Belajar Website Menyenangkan </h1>
</body>
</html>



Bandingkan dengan penggunaan <h1> tanpa CSS. Bentuk lain penggunaan css style juga dapat dilakukan seperti ini :
<link rel="stylesheet" href="style.css" type="text/css" />
Contoh :
Penggunaan Layout Position pada CSS
<html>
<head>
<title>Contoh CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="box" id="kiriatas">
Pojok Kiri atas
</div>
<div class="box" id="kananatas">
Pojok Kanan Atas
</div>
<div class="box" id="kiribawah">
Pojok Kiri Bawah
</div>
<div class="box" id="kananbawah">
Pojok Kanan Bawah
</div>
</body>
</html>

Dan isi file style.css adalah :
#kiriatas {
position: absolute;
top: 0px;
left: 0px;
}
#kananatas {
position: absolute;
top: 0px;
right: 0px;
}
#kiribawah {
position: absolute;
bottom: 0px;
left: 0px;
}
#kananbawah {
position: absolute;
bottom: 0px;
right: 0px;
}
.box {
border: 3px solid red;
background-color: #ccf;
padding: 10px;
margin: 10px;
}
Sehingga :

Previous
Next Post »