Penulisan CSS dapat dibagi dalam tiga kategori.
o Internal Style
Dalam penulisan CSS dalam kategori internal style dapat digunakan tag <style> … </style> dan harus ditempatkan di antara tag <head> …</head>
o
Inline
Style
Dalam
penulisan CSS pada kategori inline style dilakukan pada halaman web, yaitu di
dalam elemen HTML.
o
Eksternal
Style
Penggunaan CSS untuk kategori eksternal style dapat dilakukan dengan menempatkan file css di antara tag <head> . . . </head> dengan bentuk seperti berikut :
<head>
<link rel=”stylesheet” type=”text/css” href=”file.css”>
</head>
Penggunaan CSS untuk kategori eksternal style dapat dilakukan dengan menempatkan file css di antara tag <head> . . . </head> dengan bentuk seperti berikut :
<head>
<link rel=”stylesheet” type=”text/css” href=”file.css”>
</head>
Tapi Disini saya akan menggunakan cara yang kedua yaitu Inline Style:
<style>
.header {
background-color: #40B3DF;;
box-shadow: 5px 5px 5px #888888;
padding: 50px;
border: 1px solid black; color: white;
text-align: center;
font-family: "Segoe UI","Lucida Handwriting";
font-size: 250%;
}
</style>
<html>
<head>
<title>COBA CSS header and footer</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header">HEADER</div>
</body>
</html>
<style>
#kolom-kanan {
background-color: #A8CB17;
box-shadow: 5px 5px 5px #888888;
width:370px; height:200px;
float:left; padding:5px;
text-align: center;
font-family:"Lucida Handwriting";
font-size: 250%;
}
.huruf
{
margin-top:80px;
}
#kolom-tengah{
background:magenta; color:black;
box-shadow: 5px 5px 5px #888888;
width:470px; height:200px;
float:right; padding:5px;
text-align: center;
font-family:"Lucida Handwriting";
font-size: 250%;
}
.satu
{
margin-top:80px;
}
#kolom-kiri {
background:gray; color:black;
box-shadow: 5px 5px 5px #888888;
width:480px; height:200px;
float:right; padding:5px;
text-align: center;
font-family: "Lucida Handwriting";
font-size: 250%;
}
.angka
{
margin-top:80px;
}
#footer
{
background-color: #0033FF;
box-shadow: 3px 3px 5px red;
padding: 100px;
border: 1px solid black; color: white;
color: #CCCCCC;
width:1150px; height:200px;
text-align: center;
font-family: "times new roman";
font-size: 300%;
}
.isi
{
margin-top:200px;
}
</style>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="kolom-kanan">
<div class="huruf">MENU</DIV>
</div>
<div id="kolom-tengah">
<div class="satu">ISI</div>
</div>
<div id="kolom-kiri">
<div class="angka">IKLAN</div>
</div>
<div id="footer">
<div class="isi">FOOTER</div>
</div>
</body>
</html>
Outputnya:
Selamat Mencoba ya, semoga berhasill...
Tidak ada komentar:
Posting Komentar