CSS bekerja sebagai pelengkap pada HTML. Jika anda baru mempelajari HTML, maka cobalah untuk sekaligus belajar CSS. Dan anda akan terkejut dengan hasilnya..!! CSS memungkinkan web developer untuk memisahkan HTML dari aturan-aturan untuk membentuk tampilan sebuah website.

Tapi terkadang,  banyak orang yang baru belajar HTML, menganggap remeh kekuatan dan fleksibilitas  dari sebuah css. Lalu apa sih style sheet (css) itu sebenarnya? apa kegunaan  sebenarnya? dan bagaimana cara menggunakannya? CSS (Cascading Style Sheet)  digunakan untuk melengkapi file HTMl, dan tugas utamanya adalah menetapkan  aturan tampilan/style yang akan digunakan pada sebuah website.

CSS diperkenalkan  untuk pengembangan website pada tahun 1996. Nama CSS didapat dari fakta bahwa  setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang  kemudian akan membentuk hubungan parent-child pada setiap style. Setelah CSS  distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka  yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. CSS  adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam kode HTML  atau sekedar mejadi rujukan oleh HTML dalam pendefinisian style. CSS menggunakan  kode2 yang tersusun untuk menetapkan style pda elemen HTML atau dapat juga  digunakan membuat style baru yang biasa disebut class.

CSS dapat mengubah besar  kecilnya text, mengganti warna background pada sebuah halaman, atau dapat pula  mengubah warna border pada tabel, dan masih banyak lagi hal yang dapat dilakukan  oleh CSS. Singkatnya, CSS digunakan untuk mengatur susunan tampilan pada halaman  HTML.

CSS dapat digunakan untuk menggantikan <font size="+0">, <strong>, <u>dan <u>,  dikarenakan hal berikut:

sebuah file css dapat menjadi rujukan banyak halaman  HTML. Hanya dibutuhkan 1 baris kode untuk melakukan hal tersebut. Ini berarti  akan meminimalkan file2 HTML yang akan dibuat. Jika ingin mengubah tampilan  website yang telah dibuat, maka yang perlu dilakukan hanya mengganti baris-baris  kode pada css nya saja, tanpa perlu mengutak-atik file-file HTML nya. CSS dapat  mengatur banyak atribut pada sebuah halaman secara mudah.

Misalnya: warna  background, border, shadow, yang berbeda pada masing-masing tag yang digunakan.  Sekarang, kita akan mencoba melihat bagaimana css itu bekerja. Untuk itu, kita  butuh sebuah text editor (notepad, wordpad, Ms word, semua tergantung kesukaan  masing2), dan sebuah web browser tentunya Pertama, masukkan kode dibawah ini  kedalam text editor, lalu simpan dengan nama, tanpacss.html: 

</u></u></strong></font> <h1><font size="+0"><strong><u><u>tag H1</u></u></strong></font></h1> <font size="+0"><strong><u><u>

Kemudian, masukkan kode dibawah ini kedalam text editor, lalu  simpan dengan nama pakaicss.html   

h1  {  color: #FF66CC;  font-family: Verdana;  size: 18pt;  }    </u></u></strong></font> <h1><font size="+0"><strong><u><u>

tag H1 yang besar dan berwarna

</u></u></strong></font></h1> <font size="+0"><strong><u><u>

Berarti sekarang ada 2 file html yang  telah dibuat. Langkah selanjutnya, buka file-file html tersebut dengan  menggunakan web browser. tanpa css tanpa CSS pakai css pakai CSS Terlihat  bedanya bukan? Tag  </u></u></strong></font> <h1><font size="+0"><strong><u><u>

pada file tanpacss.html merupakan  </u></u></strong></font></h1> <h1><font size="+0"><strong><u><u>

yang masih polos (tanpa dikenai atribut apapun), sedangkan pada file  pakaicss.html telah diberi atribut berupa warna, font-family dan besar font yang  digunakan. Pemberian atribut itu, terletak diantara tag   dan  . Penggunaan css yang langsung dimasukkan ke dalam file HTML, biasa disebut  inline style sheet (penggunaannya seperti contoh diatas). Ada juga css yang  diletakkan diluar file html, dan untuk menggunakannya, css tersebut akan  dipanggil melalu 1 baris kode. Untuk lebih jelasnya, masukkan kode dibawah ini  kedalam text editor:  

  h1  {  color: #FF66CC;  font-family: Verdana;  size: 18pt;  } 

kemudian simpan dengan nama style1.css. Lalu buat file html, dan sisipkan kode  diantara dan  Lengkapnya: 

</u></u></strong></font></h1> <h1><font size="+0"><strong><u><u>

tag H1 yang besar dan berwarna!

</u></u></strong></font></h1> <font size="+0"><strong><u><u>

Simpan file html diatas dengan nama,  eksternalcss.html dan buka di web browser. Hasil yang ditampilkan, sama persis  dengan file pakaicss.html. Penggunaan css pada ekseternalcss.html lebih simpel,  karena css-nya hanya dipanggil melalui tag . rel=”stylesheet” digunakan  untuk memberi tahu browser bahwa file yang di “link” kan adalah file css.  type=”text/css” menginformasikan kepada browser bahwa tipe dari file yang di  “link” adalah text dan mengandung css didalamnya. href=?style1.css?  memberitahukan pada browserbahwa file yang akan di-load adalah style1.css Jika  sudah memahami contoh diatas, berarti sekarang saatnya melangkah ke contoh yang  sedikit lebih kompleks. Masukkan kode dibawah ini kedalam text editor, lalu  simpan dengan nama advancedstyle.html    h1  {  color: #636594;  font-family: verdana;  }  .CoolText  {  background: lightyellow;  border: inset;  padding-left: 10px;  padding-right: 10px;  padding-top: 2px;  padding-bottom: 2px;  color: #a00808;  font-family: Verdana;  text-decoration: underline;  size: 18pt;  cursor: wait;  letter-spacing: 3pt;  }    </u></u></strong></font> <h1><font size="+0"><strong><u><u>Hello There!</u></u></strong></font></h1> <span class="?CoolText?"><font size="+0"><strong><u><u>This is some wild colored, bordered,  cool text! </u></u></strong></font></span><font size="+0"><strong><u><u>Ketika file advancedstyle.html dibuka pada browser, maka  kurang lebih, tampilannya akan sepeti dibawah ini: image ke 3 Tag  </u></u></strong></font> <h1><font size="+0"><strong><u><u>diubah pada warna dan font-family yang digunakan, penjelasannya kurang lebih  sama dengan file pakaicss.html yang telah diuraikan diatas. Yang mungkin agak  sedikit membingungkan adalah pada bagian .CoolText. .CoolText merupakan sebuat  class pada css. Keistimewaan class adalah dapat menyusun tampilan banyak tag.  Kita ambil contoh penggunaan .CoolText. <span class="?CoolText?">Some text  </span>dapat juga digunakan dengan tag  </u></u></strong></font><p><font size="+0"><strong><u><u>, seperti dibawah ini:  </u></u></strong></font></p><p class="?CoolText?"><font size="+0"><strong><u><u>Some paragraph text Format penulisan class secara  umum: .[Class Name] { [Attribute]: [Value]; [Attribute]: [Value]; [Attribute]:  [Value]; } Aturan penulisan nama class, adalah alphanumeric. Jadi boleh saja  jika kita ingin menulis nama class dengan perpaduan angka dan huruf, misalnya:  BigGoldWriting99 [Attribute], berisi tag atribut yang akan diganti pada  penggunaan class. Dapat berupa font-family, color, border, dll. [Value] berisi  nilai perubahan yang diinginkan pada masing-masing atribut. Salah satu website  “contoh” untuk penggunaan css, adalah csszengarden.com. Silahkan review dan  saksikan sendiri keindahan css.</u></u></strong></font></p></h1>

Email (will not be published)

Name

Title

Comment

Post