Membuat tampilan aplikasi web dengan CSS

Pada artikel sebelumnya kita sudah membahas membuat fungsi – fungsi dasar PHP yang diperlukan untuk menjalankan sebuah aplikasi web, sekarang mari kita buat tampilannya dengan CSS :D

Jalankan editor scripting anda dan buat file baru dengan ekstensi .css copas atau ketik (capek kaleeee :P) script css dibawah ini :

/* CSS Document */

* { margin: 0; padding: 0;

}

body {

margin-bottom: 50px;

font: normal 13px "Trebuchet MS", Arial, Helvetica, sans-serif;

color: #3B3B3B;

}

h1, h2, h3 { color: #4F789F; }

a { color: #4F789F; }

a:hover { text-decoration: none; }

.kotak { }

.kotak .judul {

padding: 10px 15px;

background: #3B3B3B;

text-transform: uppercase;

font: bold .77em Georgia, "Times New Roman", Times, serif;

color: #FFFFFF;

}

.kotak .output-modul-kiri { padding: 15px; }

.kotak ul { list-style: none; }

.konten {

clear: both;

padding: 20px;

border-bottom: 1px solid #3B3B3B;

}

.konten .judul { }

.konten .output { line-height: 1.6em; }

.konten .title {

margin-bottom: 20px;

font-family: Georgia, "Times New Roman", Times, serif;

}

.konten p, .konten ul, .konten ol { margin-bottom: 1em; }

.konten blockquote, .konten ul, .konten ol { margin-left: 3em; }

#kolom-atas {

width: 700px;

height: 150px;

margin: 0 auto;

border:1px solid black;

}

#kolom-atas h1 {

text-transform: lowercase;

font-family: Georgia, "Times New Roman", Times, serif;

font-style: italic;

font-weight: normal;

}

#kolom-atas h1 {

float: left;

padding: 80px 0 0 20px;

letter-spacing: -3px;

font-size: 48px;

}

#kolom-halaman {

width: 700px;

margin: 0 auto;

border-top: 20px solid #3B3B3B;

}

#isi-halaman {

float: right;

width: 497px;

padding-right: 1px;

}

#kolom-kiri {

float: left;

width: 200px;

padding-left: 1px;

}

#menu-kiri { }

#menu-kiri ul {

margin: 0;

padding: 0;

list-style: none;

}

#menu-kiri li { display: inline; }

#menu-kiri a {

display: block;

padding: 5px 15px;

border-bottom: 1px solid #FFFFFF;

text-decoration: none;

color: #3B3B3B;

}

#menu-kiri a:hover { background: #4F789F; color: #FFFFFF; }

#menu-kiri .active a { background: #BABABA; color: #000000; }

#modul-kiri { }

#modul-kiri ul { }

#modul-kiri li { margin-bottom: 20px; }

#modul-kiri h3 { font-size: .77em; }

#kolom-bawah {

width: 670px;

height: 15px;

margin: 0 auto;

padding: 5px 15px;

background: #3B3B3B;

font-size: .77em;

color: #FFFFFF;

}

/* end of CSS */

 

Simpanlah script css diatas dengan nama latihan.css kedalam folder ke dalam folder css (latihan /css/latihan.css). Kalau anda menggunakan editor notepad tinggal copas dan simpan dengan nama latihan.css kedalam folder ke dalam folder CSS (latihan /CSS/latihan.css).

File css ini dapat anda modifikasi sesuai dengan kemauan anda dari tinggi, lebar, jenis font, besar font, warna dll karena css bersifat dinamis dan lebih menghemat waktu load, besaran file serta bandwith daripada membuat tampilan HTML dengan table.