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 :
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon