Tuesday 27 September 2011

CSS Tutorial

| Tuesday 27 September 2011 | 0 comments

Keuntungan Penggunaan CSS 


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>


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
bisa  mengandalkan  copy  and  paste…  masih  saja  ada  peluang  terjadinya ketidakkonsistenan. 

0 comments:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

turorial terbaru

Copyright 2011. w3-id.blogspot.com. | Template by o-om.com - zoomtemplate.com