Anda di halaman 1dari 3

MODUL 4 HTML & CSS KELAS ZEROZERO

Dasar CSS
Training Online Ilmuwebsite
http://www.ilmuwebsite.com

Lisensi Dokumen:
Copyright 2007-2008 Ilmuwebsite.Com
Hanya untuk kalangan intern, dilarang menyebarluaskan sebagian atau seluruh isi dokumen ini tanpa
ijin dan sepengetahuan pihak pengelola ilmuwebsite.com

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 di dalam 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 ... :D~~</h1>
</body>
</html>

Modul 5 CSS The basic of CSS


Kelas Zerozero | Training Online Ilmuwebsite | http://www.ilmuwebsite.com

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 {

Modul 5 CSS The basic of CSS


Kelas Zerozero | Training Online Ilmuwebsite | http://www.ilmuwebsite.com

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 ...

Modul 5 CSS The basic of CSS


Kelas Zerozero | Training Online Ilmuwebsite | http://www.ilmuwebsite.com

Anda mungkin juga menyukai