Belajar CSS, Pengenalan CSS
Assalamualaikum sahabat Ikut Belajar Blog, semoga kalian semua baik-baik semua. sekarang saya mau ngasih Pemrograman Web, Tentang CSS. karena ini masih sama-sama baru Belajar, maka kita Pengenalan CSS dulu baru nanti kita langsung ke materi. yaps langsung saja biar tidak lama-lama karena sebentar lagi ada tambahan mata kuliah untuk admin Ikut Belajar Blog.hehe
CSS adalah aturan untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih
terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. CSS yang
memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer
untuk mengatur style
elemen yang ada
dalam halaman web
mereka, mulai dari memformat text, sampai pada memformat
layout. Tujuan dari penggunaan CSS ini adalah supaya diperoleh suatu
kekonsistenan style pada elemen tertentu.
Perkembangan CSS sendiri diawali
pada tahun 1996, dimana W3C (World Wide Web Consortium), sebuah konsorsium
untuk standarisasi web, menyusun draft proposal untuk membuat CSS ini dan
akhirnya dapat berjalan. Selanjutnya pada pertengahan tahun 1998, W3C mengembangkan
CSS2 yang diperbarui untuk kepentingan media lain (tidak hanya untuk PC web
browser). Akhirnya mulai pada tahun 2000, telah dikembangkan CSS3 oleh W3C yang
sampai saat ini masih terus diperbarui lagi.
Namun pada saat ini, hanya CSS2
yang masih didukung oleh kebanyakan web browser, tapi tidak demikian halnya
untuk CSS3. Masih sedikit web browser yang mendukung CSS3. Oleh karena itu pada
tutorial ini hanya akan dibahas mengenai CSS2 saja.
Dengan menggunakan
CSS, Anda (sebagai
webmaster) akan lebih
mudah untuk mengatur style
elemen dalam halaman
web Anda. Sebagai
contoh, misalnya untuk mengatur
style elemen heading, Anda menginginkan jenis font nya adalah Arial, 20 pixeldan
berwarna merah. Dengan CSS, Anda cukup menuliskan properti dari elemen heading tersebut sekali
saja, dan Anda
akan memperoleh hasil
yang diinginkan. Bandingkan apabila tidak menggunakan CSS, Anda
akan mengatur style pada setiap elemen heading yang ada. Tentu saja hal ini
akan sangat merepotkan. Perhatikan contoh berikut 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>
<title>CSS Guide</title>
<style type="text/css">
h1 {
color: red;
font-family: "arial";
}
</style>
</head>
<h1>Ini adalah heading 1</h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
<h1>Ini adalah heading 1</h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
<h1>Ini adalah heading 1</h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
</body>
</html>
Perhatikan code
sebelumnya! Untuk mengatur
style elemen heading
1 (h1) cukup menuliskannya pada CSS sekali saja. Bandingkan
apabila Anda tidak menggunakan CSS, maka codenya akan berbentuk seperti berikut
untuk mendapatkan hasil yang sama.
<!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>
</head>
<body>
<h1><font face="arial" color="red">Ini adalah heading 1</font></h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
<h1><font face="arial" color="red">Ini adalah heading 1</font></h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
<h1><font face="arial" color="red">Ini adalah heading 1</font></h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
</body>
</html>
Anda akan menuliskan style pada
setiap elemen heading 1 yang dibuat. Tentu hal ini akan merepotkan. Apalagi
suatu saat Anda bermaksud untuk mengubah style nya, maka Anda akan mengubahnya
satu-persatu. Sangat-sangat merepotkan.
Selain itu, dengan CSS
akan diperoleh suatu
kekonsistenan style. Anda
tentu dapat merasakan keuntungan
ini, dibandingkan dengan tanpa adanya CSS yang kemungkinan besar
ketidakkonsistenan akan terjadi. Hal ini dikarenakan style hanya dituliskan
sekali, tidak seperti dengan tanpa CSS yang ditulis style berulang kali. Meskipun
Anda masih bias mengandalkan copy and
paste masih saja ada peluang terjadinya ketidakkonsistenan.
Post a Comment
Silahkan Berkomentar Dengan Baik dan Sopan
No Spam
No Link
Terima Kasih Telah Berkunjung Ke Blog ini