contoh penerapan margin, padding, border dan outline

judul website sobat

misal disini adalah deskripsi blog sobat

anggap disini adalah judul postingan

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
<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;/* */ 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>judul website sobat</h1> <!--// //sampai disini judul header --> <!--daisini deskripsi --> <p>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> <h2>judul sidebar kiri</h2> </div> <div> <h2>judul sidebar kiri 2</h2> </div> <div> <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> 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 </div> <!-- //sampai disini isi badan ------------------------------> </div> <!-- ////sampai pembentuk badan utama -------------------------------> <!-- dari sini sidebar kanan --> <div id="sidebar-kanan"> <!-- dari sini widget sidabar kanan --> <div> <h2>judul sidebar kanan</h2> </div> <div> <h2>judul sidebar kanan 2</h2> </div> <div> <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>

salam indaam site