Thursday, January 28, 2010

Mengenal CSS

Belajar CSS
Apa itu CSS?
CSS (Cascading Style Sheet) merupakan sebuah pengembangan dokumen yang mendukung HTML di dalam mendesain suatu website. CSS bukan merupakan bahasa pemrograman seperi java script, delphi, dan C+  melainkan sebuah desain yang berbasiskan scriptting yang di-embed (disisipkan) pada kode HTML.
CSS digunakan untuk mengelompokkan blok perintah yang terjadi berulang-ulang dengan membuat blok kategori sesuai kebutuhan sehingga akan membantu mempercepat dan mempermudah desain website. Dengan menggunaknan CSS,  kita tidak perlu mengulang-ulang kode yang sama karena sebelumnya telah dikategorikan berdasarkan kelompok masing-masing.

Penulisan CSS diawali dengan tanda "{" dan diakhiri dengan tanda "}" dan setiap deklarasi di dalam suatu sub categori harus diakhiri dengan tanda ";". Setiap blok kategori tersebut diawali dengan tanda '#' atau "." (titik) kecuali kode-kode yang telah umum dalam HTML seperi "p", "table", "h1...h6", "a", dan lain-lain.
Penulisan kode CSS ada dua cara, yang pertama disisipkan langsung di dalam kode HTML dan yang kedua adalah dengan menulis kode CSS tersebut pada file yang terpisah yang nantinya file CSS tersebut dipanggil dalam HTML. Penulisan code CSS pada file yang berbeda ini cara menyisipkan (memanggil) file CSS tersebut adalah seperti dua cara di bawah ini :
  • <link rel="stylesheet" href="style.css" type="text/css" media="all" />
  • <link rel="stylesheet" href="style.css" type="text/css" />
Style.css adalah nama file CSS yang nantinya harus diupload bersama-sama dengan file index. Penulisan CSS pada file yang terpisah akan lebih sederhana dan lebih memudahkan pembuatan suatu website. Pada saat membuat kode-kode CSS. Setiap blok kategori CSS sebaiknya diberi nama yang sesuai dengan desain website untuk memudahkan pengeditan nantinya, contoh :
  • Blok kategori header diberi nama #header {......} atau .header {......}
  • Blok kategori logo diberi nama #logo {......} atau .logo {......}
  • Blok kategori artikel diberi nama #artikel{......} atau .artikel {......}
  • Blok kategori footer diberi nama #footer {......} atau .footer {......}
  • Blok kategori sidebar diberinama #sidebar {.......} atau .sidebar {......}
  • Dan seterusnya (terserah anda)
Tanda {.......} maksudnya ada beberapa  kode di dalam tanda kurung tersebut yang disesuaikan dengan kebutuhan. Perbedaan penggunaan tanda pagar (#) dan titik (.) akan saya bahas pada potingan selanjutnya.
Penulisan kode CSS yang diawali dengan tanda pagar (#) nantinya akan disisipkan dalam kode HTML seperti di bawah: 

  • <div id="header"> ........</div>, 
  • <div id="footer">......</div>, 
  • <div id="sidebar">......</div>, dan seterusnya, 
Sedangakan kode CSS yang diawali dengan tanda titik(.) akan disisipkan seperti ini :  
  • <div class="header">......</div>, 
  • <div class="footer">......</div>, 
  • <div class="sidebar">......</div>, dan seterusnya.
Contoh Penulisan CSS yang disisipkan langsung dalam kode HTML:

  • Setiap paragraph akan menggunakan huruf arial, warna merah ukuran huruf 12px, align left
  • Setiap heading h1 akan menggunakan huruf bold, arial, warna biru, ukuran huruf 16px
Penulisan kodenya sebagai berikut :
<html>
   <head>
   <title>BELAJAR CSS DASAR</title>
   <style type="text/css">

   .style1 {
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
   color: #0000ff;
   }

   .style2 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #ff0000;
   }
  </style>
  </head>

 <body>
    <h1 class="style1">Judul 1</h1>
    <p class="style2">pargraph ke satu</p>
    <p class="style2">paragraph kedua</p>
    <p class="style2">pargraph ketiga</p>
    <h1 class="style1">Judul 2 </h1>
    <p class="style2">pargraph A </p>
    <p class="style2">paragraph B </p>
    <p class="style2">pargraph C </p>
    <p class="style2">&nbsp;</p>
  </body>
</html>


Tampilan setelah diposting :

Judul 1

pargraph ke satu
paragraph kedua
pargraph ketiga

Judul 2

pargraph A
paragraph B
pargraph C

Contoh lain :

<html>
  <head>
  <title>DASAR-DASAR CSS</title>
  <style type="text/css">
  .header {
            font-size: 18px;
            color: #FF0000;
            font-family:Arial, Helvetica, sans-serif;
            font-weight:bold;
    }
  .artikelatas {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 12px;
           color: #009900;
    }
  .artikelbawah {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
          color: #0033FF;
          font-style: italic;
    }
  #footer {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 10px;
          color: #00000;
          font-weight:bold;
    }
  </style>
  </head>
  <body>
          <p class="header">PENULISAN CSS</p>
          <p class="artikelatas">Paragraph ini mengunakan font arial dengan warna hijau </p>
          <p class="artikelatas">Ukuran font untuk pargraph ini 12 px</p>
          <p class="artikelatas">Font Family pada paragraph ini adalah arial, </p>
          <p class="artikelatas">Sedagkan judul heading1 (h1) menggunakan huruf tebal</p>
          <p class="artikelatas">Dengan font arial warna merah dan ukuranya 18px. </p>
          <p class="artikelbawah">Paragraph ini mengunakan font arial dengan warna biru </p>
          <p class="artikelbawah">Ukuran font untuk pargraph ini 14 px italic (miring) </p>
          <p class="artikelbawah">Font Family pada paragraph iniadalah arial, </p>
          <div id="footer">
               <p>Tulisan ini adalah terletak pada blok kategori Footer</p>
               <p>dengan Font-Family arial ukuran 8px warna hitam </p>
          </div>
</body>

</html>


Tampilan setelah diposting :
PENULISAN CSS
Paragraph ini mengunakan font arial dengan warna hijau
Ukuran font untuk pargraph ini 12 px
Font Family pada paragraph iniadalah arial,
Sedagkan judul heding1 (h1) menggunakan huruf tebal
Dengan font arial warna merah dan ukuranya 18px.
Paragraph ini mengunakan font arial dengan warna biru
Ukuran font untuk pargraph ini 14 px italic (miring)
Font Family pada paragraph ini adalah arial,

Istilah Blok kategori adalah istilah saya sendiri untuk memudahkan pengertian khususnya bagi pemula yang baru atau sedang belajar CSS.

Tambahan :
  • #00000 : Kode warna hitam
  • #ff0000 : Kode warna merah
  • #0000ff : Kode warna biru
  • #0033FF : Kode Warna Hijau
Informasi mengenai kode warna dapat anda lihat pada postingan selanjutnya.
Semoga Bermanfaat.