Tutorial Web "Tableless" - Part 2 [End]

Sebelumnya kita telah mencoba membuat website dengan div. Selanjutnya kita akan menyatukannya dengan file css. Bagi yang tidak mengikuti Tutorial Web "Tableless" - Part 1, Anda dapat mendownload file sebelumnya disini

Selanjutnya kita akan membuat file CSS

• File - New - CSS
• Simpan dengan nama yang anda inginkan
• 3 settingan utama yang harus didahului :

*{margin:0;padding:0;}

body{background-color:#eaeaea;}

#wrapper

{

margin-left:auto;

margin-right:auto;

width:900px;

background-color:#fff;

}

• Hubungkan ke file HTML yang telah anda buat / download

<link href="[NAMA CSS ANDA].css" rel="stylesheet" type="text/css" /> 

• Setting HEADER

 #header

{

background-color:#000;

height:150px;

}

• Setting #header h2

#header h2

{

color:#fff;

font-size:60px;

padding-left:50px;

padding-top:10px;

}

• Setting #header h4 

#header h4

{

color:#fff;

font-size:17px;

padding-left:55px;

padding-top:10px;

}

• Setting MENU

#menu

{

background-color:#f2f2f2;

color:#000;

font-family:Arial, Helvetica, sans-serif;

font-size:16px;

padding:12px;

} 

• Setting CONTENT

#content

{

font-family:Arial, Helvetica, sans-serif;

font-size:13px;

color:#333333;

text-align:justify;

padding:20px;

} 

• Beri jarak pada paragraf

#content p

{

padding-bottom:14px;

} 

• Settingan pada FOOTER

#footer

{

font-size:12px;

}

• Save, lalu jalankan dengan menekan F12. Maka web yang telah anda buat akan terlihat seperti dibawah ini.

  

• Selesai :) . Mudah bukan?