Assalamu 'alaikum..
Dengan berbagai alasan, hingga berbulan-bulan tak buat postingan akhirnya bisa balik lagi dan ternyata masih ingat cara memposting.hehe..

Sekarang yang di bahas adalah tentang membuat tampilan web sederhana dengan CSS ( Cascading StyleSheet ). langsung saja tampilan yang dibuat seperti ini.

Tampilan diatas adalah tampilan web yang diharapkan, langsung saja di bawah ini akan aku tuliskan sintak css nya .
simpan dengan nama file "style.css".

@charset "utf-8";
/* CSS Document */

body{
    background:url(image/misc142.jpg) ;
}
#outer1{
    margin:auto;
    width:800px;
    height:auto;
   
}
#headerout{
    margin:auto;
    width:800px;
    height:100px;
   
}
#headerkiri{
    background: url(image/logohead.jpg) no-repeat;
    margin:auto;
    width:200px;
    height:99px;
    float:left;
    border:solid 1px #C30;
}
#headerkanan {
    background: -moz-linear-gradient(top, #FFF, #FFF,#FFF, #33F) no-repeat;
    width:598px;
    height:100px;
    float:right;
    border-bottom:solid 1px #33F;
}
.judul1 {
    margin:auto;
    width:auto; height:75px;
    text-align:center;
    font-family:"Old English Text MT";
    font-size:60px;
    color:#C30;
}
.judul2 {
    margin-top:5px;
    width:auto; height:auto;
    text-align:center;
    font-family:"Lucida Console", Monaco, monospace;
    color:#FFF;
    font-size:16px;
}
#backmenu{
    margin:10px auto;
    width:800px;
    height:auto;
}

#leftmenu{
    width:200px;
    height:100px;
    float:left;
    background:url(image/promo1.jpg);
    border-left:1px solid #C30;border-top:1px solid #C30;
}
#menu {
    float:right;
    width:597px;
    height:100px;
    border-left:1px solid #C30;border-top:1px solid #C30;border-right:1px solid #C30;
    background:#FFF;
}
#menu ul {
    margin:auto;
    width:auto;
    height:90px;
    padding:5px;
    float:right;
}
#menu li {
    display: inline; 
}
#menu a {
    width:auto;
    height:auto;
    display:block;
    float:left;margin:5px;
    border:#33F solid 1px;
}
#menu a:hover, #menu .active a {
    color:#FFF;
    background:#33F;
    border-radius:30px 0px 30px 0px;
}
#outer2{
    margin:10px auto;
    width:800px;
    height:auto;
    background:#FFF;
}
#mainpage{
    margin:10px auto;
    width:798px;
    height:auto;
    border-bottom:#33F solid 1px;border-left:#33F solid 1px;border-right:#33F solid 1px;
}
#content {
    width:580px;
    height:auto;
    float:left;
    border-top:solid 1px #C30;border-left:solid 1px #C30;border-right:solid 1px #C30;
    padding:5px;
    font:"Comic Sans MS";
    color:#33F;
    font-size:14px;
    text-align:justify;
    background:#FFF;
   
}
#rightpage{
    float:right;
    width:200px;
    height:auto;
    border:solid 1px #C30;
}
#footer{
    margin:10px auto;
    width:800px;
    height:auto;
   
}
#footerleft{
    margin:auto;
    width:190px;
    height:auto;
    float:left;
    border-top:solid 1px #C30;border-left:solid 1px #C30;border-right:solid 1px #C30;
    background:#FFF;
    padding:5px;
    color:#33F;
    font-family:"Lucida Console", Monaco, monospace;
    font-size:12px;
    display:block;
    text-align:left;
}
#footerright{
    width:588px;
    height:auto;
    float:right;
    border-top:solid 1px #C30;
    padding:5px;
    color:#33F;
    font-family:"Lucida Console", Monaco, monospace;
    font-size:12px;
    display:block;
    text-align:center;
}

Setelah itu buat sintak HTML nya untuk memanggil sintak CSS tersebut.
buat file dengan nama "index.html"
sintaknya dibawah ini :

<!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>Otnamhar</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <div id="outer1">
        <div id="headerout">
            <div id="headerkiri"></div>
            <div id="headerkanan">
                <div class="judul1">Otnamhar Web</div>
                <div class="judul2">Web Designer ~ Web Programer ~ Media Sharing Informasi</div>
            </div>
        </div>
        <div id="backmenu">
            <a href=""><div id="leftmenu"></div></a>
            <div id="menu">
                <ul>
                <li><a href="#"><img src="image/House-icon.png" height="80" title="HOME" /></a></li>
                <li><a href="#"><img src="image/Library-Folder-white-icon.png" title="ARTIKEL" /></a></li>
                <li><a href="#"><img src="image/facebook-icon.png" title="FACEBOOK" /></a></li>
                <li><a href="#"><img src="image/Icon Blogger 7.png" title="OLEHMOCO.BLOGSPOT.COM" /></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div style="clear: both; margin-bottom: 0px;"></div>
    <div id="outer2">
         
            <div id="content">
            </div>
            <div id="rightpage">
            </div>
        </div>
    </div>
    <div style="clear: both; margin-bottom: 0px;"></div>
    <div id="footer">
        <div id="footerleft">Otnamhar Web<br />Phone : 087758142553<br />Email : otnamhar@gmail.com
        </div>
        <div id="footerright">Copyright &copy; 2013 Otnamhar Web ~ Hak Penuh Oleh Otnamhar<br />body background by GRSites</div>
    </div>
</body>
</html>

Nah.. seperti itu.. semoga bisa dipahami...