perbedaan antara lain:
dalam penulisan css div diawali dengan(#) sedankan class di awali dengan titik (.)
contoh penulisan div dan class.
.semua_kotak1 {font-family:tahoma, verdana; font-size:24px; color:red;}/*ini adalah class*/
#halaman{ width:980px; margin:0 auto; background-color:#03438D; /*ini adalah div*/
setiap class bisa di masukan pada div sesuai dengan keinginan kita.untuk lebih jelas kita coba langgsung praktek.
buat 2 fail di satu polder yang di beri nama index.html dan style.css
style.css
===========================================
@charset "utp-8";
/**/
.semua_kotak1 {font-family:tahoma, verdana; font-size:24px; color:red;}/*ini adalah class*/
.semua_kotak2 {font-family:tahoma, verdana; font-size:18px; color:blue;}/*ini adalah class*/
#halaman{
width:980px;
margin:0 auto;
background-color:#03438D;/*warna biru*/
}
#header {
height: 80px;
padding:10px;
background-color:#CCCCCC;
}
#kiri{
height:400px;
padding:10px;background-color:#CCCCCC;
float:left;
width:250px;
margin-top:10px;
border-radius : 10px;
}
#kanan {
height:400px;
padding:10px;
background-color:#33FF33;
float:right;width:250px;
margin-top:10px;
}
#tengah {
height:400px;
padding:10px;background-color:#CCCCCC;
margin:10px 290px 0 290px;
}
#footer { clear:both; height:40px;padding:10px; background-color:#CCCCCC; margin-top:10px;}
=======================================
index.html
=======================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 3 kolom dengan css barlianno </title>
<link rel='stylesheet' type='text/css' href='style.css'/>
</head>
<body>
<div id="halaman">
<div id="header">
HEADER
</div>
<div id="kiri"class="semua_kotak1">
isi KIRI
<br> height:400px;
padding:10px;
background-color:#CCCCCC;
float:left;
width:250px;
margin-top:10px;
border-radius : 10px;
pakai class "class="semua_kotak1"
</div>
<div id="kanan">
isi KANAN
<br>
height:400px;
padding:10px;
background-color:#33FF33;
float:right;width:250px;
margin-top:10px;
tanpa class
</div>
<div id="tengah"class="semua_kotak2">
isi TENGAH
<br>
height:400px;
padding:10px;
background-color:#CCCCCC;
margin:10px 290px 0 290px;
pakai class "class="semua_kotak2"
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
</html>
==========================================
hasil
==========================================
pada isi kiri muncul warna tek merah karna menggunakan class semua_kotak1
pada isi tengah muncul warana biru karna menngunakan class semua_kotak2
pada isi kanan muncul warna tek yang belum di seting pakai class.
cara memasukan di html
semoga bermangfaat
telah di uji coba di lab barlianno.
Tidak ada komentar:
Posting Komentar