Pendahuluan
CSS (Cascade Style Sheet) 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 200, 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 postingan ini hanya akan dibahas mengenai CSS2 saja.
Keuntungan Penggunaan CSS
Dengan menggunakan CSS, Kamu (sebagai Webmaster) akan lebih mudah untuk mengatur style elemen dalam halaman web kamu. Sebagai contoh, misalnya untuk mengatur style elemen heading, Kamu menginginkan jenis font nya adalah Arial, 18 pixel dan berwarna biru. Dengan CSS, kamu cukup menuliskan properti elemen heading tersebut sekali saja, dan kamu akan memperoleh hasil yang diinginkan. Bandingkan apabila tidak menggunakan CSS, Kamu akan mengatur style pada setiap elemen heading yang ada. Tentu saja hal ini akan sangat merepotkan. Perhatikan Contoh berikut ini :
<html>
<head>
<title> CSS</title>
<style type="text/css">
h1 {
color: blue;
font-family: "arial";
}
</style>
</head>
<body>
<h1> ini adalah heading 1</h1>
<p> Ini adalah paragraf yang tidak diberikan Style oleh CSS, jika ingin memberikan style tambah tag "p" pada style</p>
<h1> ini adalah heading 1</h1>
<p> Ini adalah paragraf yang tidak diberikan Style oleh CSS, jika ingin memberikan style tambah tag "p" pada style</p>
<head>
<title> CSS</title>
<style type="text/css">
h1 {
color: blue;
font-family: "arial";
}
</style>
</head>
<body>
<h1> ini adalah heading 1</h1>
<p> Ini adalah paragraf yang tidak diberikan Style oleh CSS, jika ingin memberikan style tambah tag "p" pada style</p>
<h1> ini adalah heading 1</h1>
<p> Ini adalah paragraf yang tidak diberikan Style oleh CSS, jika ingin memberikan style tambah tag "p" pada style</p>
</body>
</html>
</html>
Dan Hasilnya adalah :
Perhatikan code sebelumnya! untuk mengatur style elemen heading 1 (h1) cukup menuliskannya pada css sekali saja. Bandingkan apabila Kamu tidak menggunakan CSS maka codenya akan berbentuk seperti berikut untuk mendapatkan hasil yang sama.
<html>
<head>
<title>css</title>
</head>
<body>
<h1> <font face="arial" color="blue"> ini adalah heading 1</font></h1>
<p> Ini adalah paragraf yang tidak diberikan Style oleh CSS, jika ingin memberikan style tambah tag "p" pada style</p>
<h1> <font face="arial" color="blue"> ini adalah heading 1</font></h1>
<p> Ini adalah paragraf yang tidak diberikan Style oleh CSS, jika ingin memberikan style tambah tag "p" pada style</p>
</body>
</html>
Kamu akan menuliskan style pada setiap elemen heading 1 yang dibuat tentu hal ini akan merepotkan. Apalagi suatu saat Kamu bermaksud untuk mengubah style-nya, maka Kamu akan mengubahnya satu-persatu. Sangat merepotkan dan menghabiskan waktu yang tidak sedikit.
Selain itu, dengan CSS akan diperoleh suatu kekonsistenan style. Kamu tentu dapat merasakan keuntungan ini, dibandingkan dengan tanpa adanya CSS yang kemungkinan besar ketidakkonsistenan akan terjadi. Hal ini dikarenakan style haya dituliskan sekali, tidak seperti dengan tanpa CSS yang ditulis style berulang kali. Meskipun kamu masih bisa mengandalkan Copy dan Paste (CTRL+C dan CTRL+V)... Masih saja ada peluang terjadinya ketidak-konsistenan.
SEKIAN POSTINGAN SAYA KALI INI, SEMOGA BERMANFAAT.
Tidak ada komentar:
Posting Komentar