External Cascade Style Sheet ( External CSS )
Mukadimah Cascade Style Sheet
atau CSS :
CSS atau Cascade Style Sheet digunakan untuk mengatur elemen yang ada
di dalam halaman web, CSS dibuat berdasarkan World Wide Web Consortium atau
yang lebih dikenal dengan W3C sebuah konsorsium untuk standarisasi web.
Kelebihan :
1. Penggunaan CSS akan terasa lebih mudah dalam mengatur
style elemen halaman web.
2. CSS tidak membutuhkan tabel dalam menata layoutnya.
3.Kelebihan CSS dalam layout web adalah fleksibilitas
dan dapat meminimalisasi besaran jumlah byte file dibandingkan layout
menggunakan table.
Apabila design layout web dibuat menggunakan tabel , maka semakin
banyak sel yang dibuat akan semakin besar ukuran file byte, dan akibatnya
loading web pun membutuhkan waktu yang lebih lama.
Contoh standar penggunaan CSS :
<!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>
<title> CSS Guide</title>
<style type='text/css'>
h1 {
padding-left:300px;
color : blue;
font family : "arial";
}
p {
padding-left:200px;
padding-right:400px;
</style>
</head>
</body>
<h1>Kolom tengah untuk isi
dari content</h1>
<p>Selamat datang di Website saya, sekarang saya lagi mendisain
layout dengan CSS. Selamat datang di Website saya, sekarang saya lagi mendisain
layout dengan CSS. Selamat datang di Website saya, sekarang saya lagi mendisain
layout dengan CSS. Selamat datang di Website saya, sekarang saya lagi mendisain
layout dengan CSS.</p>
</body>
</html>
Untuk menjalankan script diatas save dengan nama file tes.htm kemudian jalankan di browser
External Cascade Style Sheet
Perbedaan CSS External dan CSS Internal ialah script CSS Internal
dibuat jadi satu file dengan script ( X )HTML sedangkan untuk CSS External script
CSS terpisah dengan script ( X ) HTML nya pada file CSS itu sendiri.
Keuntungan CSS External : Dapat
digunakan untuk berbagai macam web dengan sedikit penyesuaian dan penambahan
URL pada attribut href.
Contoh Script CSS External :
Penambahan URL pada attribute
href untuk menjalankan file CSS :
Dua Design halaman web yang
berbeda dengan menggunakan CSS External yang sama :
Keterangan : Pada kedua
halaman website diatas saya menggunakan file CSS yang sama. Di halaman website
Bogor Air Indonesia, saya menghilangkan kolom BERGABUNG DENGAN GROUP KAMI DI FACEBOOK dan memanjangkan kolom
Photo Galeri. Perbedaan tata letak konten dapat diatur sesuai dengan keinginan
anda, perhatikan perbedaan Menu Atas dalam halam web untuk perusahaan Airlines
yang saya pindahkan ke bawah pada kolom kiri, kolom Programmer saya pindah ke kolom
kanan yang tadinya berada di kolom kiri, begitupun akan warna, block, tulisan, attach,
hover, dll.
Tips : Dalam membuat layout
dengan CSS yang baik, sangat penting melakukan pembagian elemen halaman ke
dalam division-division yang telah dipetakan. Semoga bermanfaat dan dapat
menginspirasi dalam design web programming.
