CSS Di Bagi Menjadi 2 Bagian Yaitu ID Tags dan Class Tags. Apa Bedanya ? Ini Dia Bedanya :
ID Tags CSS
ID Tags CSS Biasanya Menggunakan Tanda "#" Pada Awalan Selector. Biasanya penggunaan class ini pada selector yang sudah di kelompokan. Kalau pada blogspot kita akan menemui banyak tags jenis ini.Contohnya :
#ContohIDTagsCSS{}
Untuk Pemanggil Selector Tersebut Menggunakan id="selector" dan Diakhiri Dengan /div. Contohnya :
<div id="ContohIDTagsCSS"></div>
Class Tags CSS
Class Tags CSS Biasanya Menggunakan Tanda "." Pada Awalan Selector. Contohnya :
.ContohClassTagsCSS{}
Untuk Pemanggil Selector Tersebut Menggunakan class="selector" dan Diakhiri Dengan /div. Contohnya :
Command CSS
Command CSS adalah perintah yang bisa digunakan dalam bahasa CSS. Ada berbagai macam perintah dalam bahasa CSS yang bisa anda gunakan. Yang sering digunakan dalam membuat template blogspot adalah seperti dibawah ini:
Dan Ini Dia Source Dari Hasil Design Di Atas :
<div class="ContohClassTagsCSS"></div>Sekarang Kita Lanjut Ke Command CSS
Command CSS
Command CSS adalah perintah yang bisa digunakan dalam bahasa CSS. Ada berbagai macam perintah dalam bahasa CSS yang bisa anda gunakan. Yang sering digunakan dalam membuat template blogspot adalah seperti dibawah ini:
 |
| Cheat Sheet |
Vidio :
Dan Ini Dia Source Dari Hasil Design Di Atas :
<!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>Untitled Document</title>
<style type="text/css">
body {
background-color: #FFF;
}
#outer-wrapper {
font: normal 14px/normal "Lucida Console", Monaco, monospace;
text-decoration: none;
height: 630px;
width: 980px;
padding: 0;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#katasambutan {
font-family: "Comic Sans MS", cursive;
color: #FFF;
background: #000;
padding: 5px;
width: auto;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#outer-wrapper #header {
font: normal 24px/normal "Comic Sans MS", cursive;
background: #333;
color: #FFF;
width: auto;
height: 100px;
border: 1px solid #333;
text-align: center;
padding: 30px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#outer-wrapper #main-wrapper {
font: normal 16px/normal "Times New Roman", Times, serif;
width: 600px;
padding: 3px;
margin: 5px;
height: 450px;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#outer-wrapper #main-wrapper #main {
width: 550px;
height: 150px;
background: #CCC;
border: 1px solid #CCC;
text-align: center;
color: #000;
font: normal 24px/normal "Comic Sans MS", cursive;
text-decoration: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
padding: 2px;
}
#footer-wrapper {
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 50px;
width: auto;
padding: 2px;
margin-top: 15px;
text-align: center;
border: 1px solid #000;
color: #FFF;
background: #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#outer-wrapper #sidebar-wrapper {
width: 345px;
float: right;
margin: 5px;
padding: 2px;
border: 5px dashed #FFF;
height: 450px;
background: #CCC;
text-align: center;
font: normal 18px/normal "Comic Sans MS", cursive;
}
</style>
</head>
<body>
<div id="katasambutan">
<marquee>
Selamat Datang / Welcome To My Blog Rully Nur'mansyah Yang Sederhana Ini :D | Jangan Lupa Komen dan Follow Blog Kami Ya :D
</marquee>
</div>
<div id="outer-wrapper">
<div id="header">
<p>Design Template Dengan DreamWeaver</p>
<p>www.all-tutorial.org</p>
</div>
<div id="sidebar-wrapper">Sidebar-Wrpper</div>
<div id="main-wrapper">
<div id="main">main-wrapper:content-wrapper</div>
</div>
</div>
<div id="footer-wrapper">
<p>Design By Rully Nur'mansyah</p>
</div>
</body>
</html>
Jika ada Yang Tidak Di Mengerti Silahkan Tanyakan Saja
nice gan
ReplyDeletethanks gan
DeleteKeren nich gan ! happy blogging,,,,,,,,
ReplyDeleteahahah makasi and happy blogging juga
Deletewahhh bolehh nichh
ReplyDeletethank's dachhh
Yo sama2 Kang Bahro :D
Delete