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 pixel
dan 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>
<body>
<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>
Code di atas
akan menghasilkan tampilan sebagai berikut
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.
0 comments:
Post a Comment