CORETAN TANGAN KU OMPED: Desain Layout Dengan Menggunakan CSS

Desain Layout Dengan Menggunakan CSS

Posted in

21.46

Cascading style sheet (CSS) merupakan alat bantu coding html, CSS ini sangat membantu kita dalam membangun web yang menuju lebih baik, dan tentunya cepat dalam prosesnya, didalam css sendiri menguraikan tiga jenis style yang biasa digunakan yaitu yang pertama Embedded (Pengelompokan html dalam 1 blok), yang kedua. Inline ( konsep terapan style secara langsung dalam 1 baris) dan yang ketiga.Linked ( konsep pemanggilan style diluar html menggunakan file berekstensi css).

Dibawah Ini adalah Script untuk menggunakan fasilitas CSS.

* { margin: 0; }

body { margin:5px auto; padding:0; font:0.72em/150% verdana; }

#wrapper { margin:auto; width:980px;}

#header { height:80px; margin:0px auto;background:#000;}

#header-content{height:70px; margin:auto; background:#fff url(162.jpg);}

#menu-top { font-size:small; height:20px; float:right; padding:0px 50px; font-weight:bold;}

#logo { float:left; margin:10px 10px 10px 50px; height:50px;}

#site-title h2{ float:left; padding:0px 10px; height:30px; margin:20px 0px; font:2.1em/100% 'Verdana'; font-weight: bold;}

#search { clear:right; float:right; margin:20px 50px 0px auto; height:30px; font-weight:bold;}

#inner { float:left; margin:0px;}

#footer { clear:both; height:60px; background:#FFCC99;}

#footer p { text-align:center;}

#sidebar { float:left; width:200px; height:400px; background-color:#FFCC99}

#content { float:right; width:780px; height:400px; background:#FFF}

#content-top { clear:both; margin:auto; width:700px; height:140px; background-image:url(icons_fullset.jpg)}

#content-main { float:left; margin:auto; width:480px; height:240px;}

#content-main p, h3{ padding: 10px 20px 0px 20px; text-align:justify;}

.style1 {font-size:x-small}

#content-main hr{ width:440px; color:#FF9900; margin: 10px 20px 0px 20px;}

#content-right { float:right; margin:10px auto; width:260px; border: 2px solid green; background:yellow}

#content-right h3{ padding: 10px 20px 0px 20px; text-align:justify;}

#content-right ul{ padding: 10px 20px 20px 40px; list-style:square;}

#leftmenu ul { width:200px; list-style-type:none; padding:0; margin:0;}

#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left:15px; text-decoration:none;}

#leftmenu a { padding: 5px 0px 5px 15px; display:block; background:black no-repeat left center; margin: 0px 0px 1px; color:#fff000 }

#leftmenu a:hover { background:#fff000 no-repeat left center; color:#f000f}