Cara membuat tampilan web atau layout menggunakan CSS

Membuat layout website dengan css 
 
Untuk dasar  cara membuat tampilan web atau layout menggunakan CSS , kita perlu mengetahui apa-apa saja yang ada pada layout sebuah web sehingga terbentuk sebuah web seperti yang kita inginkan.

Di dalam sebuat web terdapat 4 urutan atau kerangka web yaitu, Header, Sidebar, Section (body), Footer.
Header : Kepala website. Tempat letak judul web, logo web dan lain sebagainya.
Sidebar : Tempat letaknya menu, konten, dan lain sebagainya.
Section (Body) : Merupakan bagian tubuh dari sebuah website, tempat dimana artikel atau postingan akan tampil.
Footer : Merupakan bagian untuk penulisan sebuah Hak Cipta sebuah website.
Berikut Syntax CSS dasar untuk membuat tampilan web atau layout :

<!DOCTYPE html>
<html>
<head>
<style>
#wrapper{
            width: 100%;
            margin: 0 auto;
        }
#header {
            background-color:#1abc9c;
            color:#2c3e50;
            text-align:left;
            padding:10px;
            font-family:Century;
        }
#sidebar     {
            line-height:30px;
            background-color:#16a085;
            height:500px;
            width:200px;
            float:right;
            padding:5px;
            text-align:center;
        }
#body{
            width:350px;
            float:left;
            padding:10px;        
        }
#footer {
            background-color:#1abc9c;
            color:#2c3e50;
            clear:both;
            text-align:center;
            padding:5px;        
        }
</style>
</head>

<body>

<div id=”wrapper”>

<div id=”header”>
<h1>Cari Kode</h1>
</div>

<div id=”sidebar”>
Home<br>
About<br>
</div>

<div id=”body”>
<h2>Posting</h2>
<p>
(Body) Isi dari postingan
</p>
</div>

<div id=”footer”>
Copyright Carikode.com
</div>
<body>
<html>

Untuk penulisan syntax di atas gunakan Internal Style, Bagi teman – teman cari kode yang belum tahu silahkan baca artikel sebelumnya tentang “Menghubungkan HTML dengan CSS”.
ini hasil outputnya :
membuat tampilan web atau layout menggunakan CSS

Source : http://www.carikode.com

 

Regard

Rismawan Junandia