share kali ini, kita akan membuat box/badan, sidebar-kiri, kanan dan footer.
kan palsu kalau ngebahas tentang css trus ngga bisa mempraktekanya :malu
ok langsunga saja ya!

  • buka notepad
  • lalu copy style/markup code dibawah
  • save as(pilih all types)
  • dengan nama contohcssmodel.htm

ini codenya(agak panjang)

<html>
<head>
<title>contoh penerapan margin, padding, border dan outline</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
/*misal tag body*/body{
background-color:pink;/* warna latar belakang body pink*/
margin:0 auto 10px auto;/* jarak-luar atas 0, kiri dan kana auto, sedangkan bawah 10px */
padding:5px;/* jarak/batas dalam masing-masing 5px*/
width:800px;/* lebar 800px*/
}
/*mulai bagian header*/
#pembentuk-headernya{
height:200px;/* tingginya 200px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:0 auto;/*jarak luar atas bawah 0, kiri-kanan auto */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#pembentuk-headernya .judul{
/*style ini untuk judulnya*/
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, sedangkan kiri 20px*/
font-size:40px;/* ukuran font 40px*/
text-transform:capitalize;/* setiap kata diawali dengan huruf kapaital*/
font-family:times;/* font family times*/
}
#pembentuk-headernya .deskripsinya{
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, kiri 29px*/
font-size:20px;/* ukuran font 20px*/
}
/*bagian header selesai*/
/*mulai sidebar-kiri*/
#sidebar-kiri{
min-height:1400px;/* tinggi minimal*/
float:left;/*menekan kekiri */
width:200px;/*lebar 200px */
margin:10px 0;/*jarak luar atas-bawah 10px, kiri-kanan 0 */
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kiri .anggapwidget, #sidebar-kanan .anggapwidget{
min-height:300px;/* tinggi minimal 300px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:5px;/*jarak luar masing-masing 5px */
background-color:pink;/* warna latar belakang pink*/
-moz-border-radius:10px;/* */
}
#sidebar-kiri h2{
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double white;/* garis bawah lebar tebal 2px, style double warna putih*/
font-size:20px;/* ukuran font 20px*/
text-align:center;/* text rata tengah */
text-transform:capitalize;/*setiap kata diawali dengan huruf besar/kapaital */
}
/*bagian sidebar-kiri selesai*/
/*mulai badan utam*/
#badan-utamanya{
min-height:920px;/* tinggi minimal 920px*/
float:left;/* menekan kekiri*/
width:400px;/* lebar 400px*/
margin:10px;/*jarak luar masing-masing 10px */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#badan-utamanya h2{
/*style ini untuk judul badan h2*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double pink;/*garis bawah tebal 2px double, warna pink */
font-size:22px;/* ukuran font 22px*/
text-align:left;/*text rata kiri */
text-transform:capitalize;/* setiap kata diawali dengan huruf kapital/besar*/}
#badan-utamanya .isinya{
/*style ini untuk isi badan*/
margin:10px;/* jarak luar masing-masing 10px*/
font-size:17px;/* ukuran font 17px */
text-indent:20px;/* jrak awal paragraf*/
}
/*bagian badab selesai*/
/*mulai sidebar kanan*/
#sidebar-kanan{
min-height:1400px;/* tinggi minimal 600px*/
float:right;/* menekan ke kanan*/
width:180px;/* lebar 180px*/
margin:10 0 0 0;/*jarak luar atas 10, kiri-kanan-bawah 0 */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kanan h2{
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double pink;/*garis bawah tebal 2px titik-titik, warna pink */
font-size:18px;/*ukuran font */
text-align:right;/* text rata kanan*/
text-transform:capitalize;/* setiap kata diawali dengan huruf besar*/
}
#by-indam{
outline:white dotted 16px;/*garis luar tebal 16px titik-titik, warna putih */
min-height:40px;/*minimal tinggi 40px */
margin:10px auto;/* jatak luar atas dan bawah 10px, kiri-kanan auto*/
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-bottomright:10px;/* */
-moz-border-radius-bottomleft:10px;/* */
}
#by-indam p{
text-align:right;/*text rata kanan */
margin:0;/*jarak luar masing-masing 0 */
padding:5px 10px;/* jarak dalam atas-bawah 5px, kiri-kanan 10px*/
}
</style>
</head>
<body>
<!-- dari sini pembentuk header --------------------------------------------->
<div id="pembentuk-headernya">
<!-- mulai deri sini judul header -->
<h1 class="judul">judul website sobat</h1>
<!--// //sampai disini judul header -->
<!--daisini deskripsi -->
<p class="deskripsinya">misal disini adalah deskripsi blog sobat</p>
<!-- ////sampai disini deskripsi -->
</div>
<!-- ////sampai disini pembentuk header --------------------------------------------->
<!-- dari sini sidebar kiri --------------------------------------------->
<div id="sidebar-kiri">
<!-- dari sini isi widget sidebar -->
<div class="anggapwidget">
<h2>judul sidebar kiri</h2>
</div>
<div class="anggapwidget">
<h2>judul sidebar kiri 2</h2>
</div>
<div class="anggapwidget">
<h2>judul sidebar kiri 3</h2>
</div>
<!-- ////sampai sini isi widget sidebar -->
</div>
<!-- //sampai disini sidebar kiri --------------------------------------------->
<!-- dari sini badan utama -->
<div id="badan-utamanya">
<h2>anggap disini adalah judul postingan</h2>
<!-- dari sini isi badan utama -->
<div class="isinya">
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text
<blockquote>&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
&amp;lt;title&amp;gt;contoh penerapan margin, padding, border dan outline&amp;lt;/title&amp;gt;
&amp;lt;meta content="indam url:http://www.indaam.com" name="author"/&amp;gt;
&amp;lt;style type="text/css"&amp;gt;
/*misal tag body*/body{
background-color:pink;/* warna latar belakang body pink*/
margin:0 auto 10px auto;/* jarak-luar atas 0, kiri dan kana auto, sedangkan bawah 10px */
padding:5px;/* jarak/batas dalam masing-masing 5px*/
width:800px;/* lebar 800px*/
}
/*mulai bagian header*/
#pembentuk-headernya{
height:200px;/* tingginya 200px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:0 auto;/*jarak luar atas bawah 0, kiri-kanan auto */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#pembentuk-headernya .judul{
/*style ini untuk judulnya*/
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, sedangkan kiri 20px*/
font-size:40px;/* ukuran font 40px*/
text-transform:capitalize;/* setiap kata diawali dengan huruf kapaital*/
font-family:times;/* font family times*/
}
#pembentuk-headernya .deskripsinya{
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, kiri 29px*/
font-size:20px;/* ukuran font 20px*/
}
/*bagian header selesai*/
/*mulai sidebar-kiri*/
#sidebar-kiri{
min-height:1400px;/* */
float:left;/*menekan kekiri */
width:200px;/*lebar 200px */
margin:10px 0;/*jarak luar atas-bawah 10px, kiri-kanan 0 */
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kiri .anggapwidget, #sidebar-kanan .anggapwidget{
min-height:300px;/* tinggi minimal 300px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:5px;/*jarak luar masing-masing 5px */
background-color:pink;/* warna latar belakang pink*/
-moz-border-radius:10px;/* */
}
#sidebar-kiri h2{
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double white;/* garis bawah lebar tebal 2px, style double warna putih*/
font-size:20px;/* ukuran font 20px*/
text-align:center;/* text rata tengah */
text-transform:capitalize;/*setiap kata diawali dengan huruf besar/kapaital */
}
/*bagian sidebar-kiri selesai*/
/*mulai badan utam*/
#badan-utamanya{
min-height:920px;/* tinggi minimal 920px*/
float:left;/* menekan kekiri*/
width:400px;/* lebar 400px*/
margin:10px;/*jarak luar masing-masing 10px */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#badan-utamanya h2{
/*style ini untuk judul badan h2*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double pink;/*garis bawah tebal 2px double, warna pink */
font-size:22px;/* ukuran font 22px*/
text-align:left;/*text rata kiri */
text-transform:capitalize;/* setiap kata diawali dengan huruf kapital/besar*/}
#badan-utamanya .isinya{
/*style ini untuk isi badan*/
margin:10px;/* jarak luar masing-masing 10px*/
font-size:17px;/* ukuran font 17px */
text-indent:20px;/* jrak awal paragraf*/
}
/*bagian badab selesai*/
/*mulai sidebar kanan*/
#sidebar-kanan{
min-height:1400px;/* tinggi minimal 600px*/
float:right;/* menekan ke kanan*/
width:180px;/* lebar 180px*/
margin:10 0 0 0;/*jarak luar atas 10, kiri-kanan-bawah 0 */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kanan h2{
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double pink;/*garis bawah tebal 2px titik-titik, warna pink */
font-size:18px;/*ukuran font */
text-align:right;/* text rata kanan*/
text-transform:capitalize;/* setiap kata diawali dengan huruf besar*/
}
#by-indam{
outline:white dotted 16px;/*garis luar tebal 16px titik-titik, warna putih */
min-height:40px;/*minimal tinggi 40px */
margin:10px auto;/* jatak luar atas dan bawah 10px, kiri-kanan auto*/
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-bottomright:10px;/* */
-moz-border-radius-bottomleft:10px;/* */
}
#by-indam p{
text-align:right;/*text rata kanan */
margin:0;/*jarak luar masing-masing 0 */
padding:5px 10px;/* jarak dalam atas-bawah 5px, kiri-kanan 10px*/
}
&amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
&amp;lt;!-- dari sini pembentuk header ------------------------------&amp;gt;
&amp;lt;div id="pembentuk-headernya"&amp;gt;
&amp;lt;!-- mulai deri sini judul header --&amp;gt;
&amp;lt;h1&amp;gt;judul website sobat&amp;lt;/h1&amp;gt;
&amp;lt;!--// //sampai disini judul header --&amp;gt;
&amp;lt;!--daisini deskripsi --&amp;gt;
&amp;lt;p&amp;gt;misal disini adalah deskripsi blog sobat&amp;lt;/p&amp;gt;
&amp;lt;!-- ////sampai disini deskripsi --&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- ////sampai disini pembentuk header ------------------------------&amp;gt;
&amp;lt;!-- dari sini sidebar kiri ------------------------------&amp;gt;
&amp;lt;div id="sidebar-kiri"&amp;gt;
&amp;lt;!-- dari sini isi widget sidebar --&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kiri&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kiri 2&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kiri 3&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- ////sampai sini isi widget sidebar --&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- //sampai disini sidebar kiri ------------------------------&amp;gt;
&amp;lt;!-- dari sini badan utama --&amp;gt;
&amp;lt;div id="badan-utamanya"&amp;gt;
&amp;lt;h2&amp;gt;anggap disini adalah judul postingan&amp;lt;/h2&amp;gt;
&amp;lt;!-- dari sini isi badan utama --&amp;gt;
&amp;lt;div&amp;gt;
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
&amp;lt;/div&amp;gt;
&amp;lt;!-- //sampai disini isi badan ------------------------------&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- ////sampai pembentuk badan utama -------------------------------&amp;gt;
&amp;lt;!-- dari sini sidebar kanan --&amp;gt;
&amp;lt;div id="sidebar-kanan"&amp;gt;
&amp;lt;!-- dari sini widget sidabar kanan --&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kanan&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kanan 2&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kanan 3&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- ////sampai disini widget sidebar kanani -------------------------------&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!--// //sampai disini sidebar kanan ------------------------------&amp;gt;
&amp;lt;div style="clear:both;/* */"&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;!-- dari sini anggap footer ------------------------------&amp;gt;
&amp;lt;div id="by-indam"&amp;gt;
&amp;lt;p&amp;gt;salam &amp;lt;a href="http://www.indaam.com" title="indam site" target="_blank"&amp;gt;indaam site&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- ////sampai disini footer ------------------------------&amp;gt;
&amp;lt;!-- //sampai disini sidebar kiri --&amp;gt;
&amp;lt;!-- contoh ini bisa sobat gunakan untuk membuat themes! i love all frien's
sebenarnya masih mmau nambahin tapi cape nulisnya
semoga bermanfaat --&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
</blockquote></div>
<!-- //sampai disini isi badan --------------------------------------------->
</div>
<!-- ////sampai pembentuk badan utama ---------------------------------------------->
<!-- dari sini sidebar kanan -->
<div id="sidebar-kanan">
<!-- dari sini widget sidabar kanan -->
<div class="anggapwidget">
<h2>judul sidebar kanan</h2>
</div>
<div class="anggapwidget">
<h2>judul sidebar kanan 2</h2>
</div>
<div class="anggapwidget">
<h2>judul sidebar kanan 3</h2>
</div>
<!-- ////sampai disini widget sidebar kanani ---------------------------------------------->
</div>
<!--// //sampai disini sidebar kanan --------------------------------------------->
<div style="clear:both;/* */"></div>
<!-- dari sini anggap footer --------------------------------------------->
<div id="by-indam">
<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</div>
<!-- ////sampai disini footer --------------------------------------------->
<!-- //sampai disini sidebar kiri -->
<!-- contoh ini bisa sobat gunakan untuk membuat themes! i love all frien's
sebenarnya masih mmau nambahin tapi cape nulisnya
semoga bermanfaat -->
</body>
</html>

keterangan

  • value cssnya terletak antara : (titik dua) dan ; (titik koma)
  • fungsi css adalah untuk merubah tampilan
  • kode dari /* sampai */ adalah komentar css, fungsi dari komentar ini agar kita teidak lupa pada value yang kita beri, komentar ini tidak akan berpengaruh terhadap value css
  • kode dari <!– sampai –> adala komentar html
  • silakan edit valuenya untuk belajar

semoga bermanfaat

shared to : facebook | twitter

tentang penulis

indamindam

Indam, seorang web designer, wordpress theme development, -
blogger dan penulis yang ingin terus belajar! read more about indam ⇉


Indam on | facebook | twitter

Related post

Berlangganan via FeedBurner

One Response to Contoh template dengan Margin Padding Border dan Outline

  1. Ariko D' Hagana says:
    November 26, 2011 at 8:21 am

    Halo WebMaster
    Thanks 4 Sharing
    Bermanfaat sekali untuk belajar
    Izin berkeliling untuk membaca ya
    Keep Sharing Bro…

    Reply

Sorry, formulir komentar sedang dalam perbaikan