Saturday, December 13, 2014

Tutorial CSS Part 1: Apa Itu CSS ?

CSS adalah singkatan dari Cascading Style Sheet. CSS berfungsi sebagai pengendali komponen pada elemen sebuah website. CSS menentukan tampilan sebuah website melalui nilai-nilai properti style yang disetting pada tiap-tiap elemen dalam website tersebut.

Latar belakang penggunaan CSS

Penggunaan CSS didasari oleh kebutuhan akan tampilan sebuah website. Sebagaimana diketahui bahwa selain isi, tampilan sebuah website merupakan faktor yang tidak kalah pentingnya. Tampilan website yang baik akan membuat pengunjung nyaman dalam membaca dan mengakses isi sebuah website. Hal ini tentu positif bagi perkembangan website tersebut.

Tata letak website yang baik merupakan susunan dari tiap-tiap bagian secara baik dan proporsional. Sebagai contoh saat kita mengatur jarak antar bagian melalui margin dan padding, juga saat mengatur penggunaan font, ukuran font dan warna font.

Cara Membuat CSS

Dalam membuat CSS ada empat hal utama yang perlu diketahui, yaitu:
  1. Selector, adalah bagian atau elemen website yang akan diatur stylenya.
  2. Deklarasi, merupakan pernyataan yang menetapkan style yang berisi Properti dan Nilai.
  3. Properti, adalah parameter tampilan yang akan kita atur.
  4. Nilai, merupakan ukuran yang itetapkan pada parameter properti.
Contoh membuat CSS untuk paragraf :
p {
    margin: 10px;
}

Penjelasan contoh diatas :
  1. p merupakan selector untuk elemen paragraf
  2. {...}, merupakan deklarasi, dalam hal ini berisi margin: 10px;
  3. margin, merupakan properti untuk mengatur jarak dengan elemen lain.
  4. 10px, merupakan nilai yang ditetapkan untuk properti margin.
Dalam sebuah deklarasi kita bisa menyetting beberapa properti sekaligus, seperti contoh berikut ini :
p {
    margin: 10px;
    padding: 5px;
    font-size: 10px;
}

Cara Penulisan CSS

Untuk menggunakan CSS ada tiga cara yang bisa dilakukan yaitu dengan cara Inline CSS, Embedded CSS dan External CSS.

1. Inline CSS

Adalah penulisan CSS didalam elemen html secara langsung. Jadi dalam hal ini kita tidak memerlukan penulisan selector karena sudah langsung tertuju pada elemen yang dimaksud. Sebagai gantinya, kita menggunakan tag style="..." pada elemen tersebut.

Contoh penulisan Inline CSS:
<p style="margin:10px;">

Penjelasan dari kode diatas adalah, kita menetapkan properti margin sebesar 10px untuk elemen paragraf (p). Diantara tanda petik dua (") kita bisa menyisipkan beberapa deklarasi properti dan nilai sekaligus dengan cara masing-masing deklarasi tetap diakhiri dengan tanda titik koma (;).

2. Embedded CSS

Adalah penulisan CSS secara tersendiri namun berada dalam satu file html. Cara ini membutuhkan selector dalam penulisannya. Beberapa kode CSS ditulis didalam tag <style>...</style>. kita bisa menuliskan beberapa selector beserta deklarasi properti dan nilai didalam tag <style> ini.

Contoh penulisan Embedded CSS dalam sebuah file html:
 <html>  
 <head>  
 <title>Contoh Embedded CSS</title>  
 </head>  

 <style>  
   p {  
     margin: 10px;  
   }  
   h1 {  
     font-size: 15px;  
   }  
 </style>  

 <body>  
 <h1>Judul dengan font 15px</h1>  
 <p>Ini adalah paragraf pertama</p>  
 <p>Ini adalah paragraf kedua</p>  
 </body>  
 </html>  
Pada contoh embeddes CSS diatas kita menetapkan font untuk heading h1 sebesar 15px dan margin antar paragraf sebesar 10px.

3. Eksternal CSS

Ini adalah cara paling efektif dan banyak dipakai oleh kebanyakan website saat ini. Dengan eksternal CSS kita menaruh kode-kode CSS didalam sebuah file tersendiri lalu membuat link didalam file html menuju file CSS yang telah dibuat. Cara ini lebih efisien dan mempermudah pekerjaan mendesain dan mengelola sebuah website.

Contoh penulisan Eksternal CSS :
- Pertama kita membuat kode berikut ini pada file .css, lalu menyimpannya misalnya dengan nama style.css
  
   p {  
     margin: 10px;  
   }  
   h1 {  
     font-size: 15px;  
   }  
- Kemudian kita buat file html berikut ini yang menggunakan css dari file style.css lalu disimpan misalnya dengan nama index.php
 <html>  
 <head>  
 <title>Contoh Embedded CSS</title>  
 <link rel="stylesheet" type="text/css" href="style.css">  
 </head>  
   
 <body>  
 <h1>Judul dengan font 15px</h1>  
 <p>In adalah paragraf pertama</p>  
 <p>In adalah paragraf kedua</p>  
 </body>  
 </html>  
Pada contoh diatas kita menggunakan CSS yang sama daricontoh sebelumnya, hanya saja kali ini kita memisahkan kode-kode css didalam fle tersediri, yang kita beri nama style.css.

Kemudian pada bagian head dari file index.html kita taruh link menuju file css dengan kode <link rel="stylesheet" type="text/css" href="style.css">. Hasil tampilan dari contoh ini sama dengan contoh sebelumnya,

Keuntungan dari cara ini adalah kita bisa lebih mudah mengelola CSS untuk banyak halaman secara sekaligus. Selain itu proses membuka website untuk halaman kedua dans eterusnya menjadi lebih ringan karena tidak perlu loading ulang css.

Untuk membuat file CSS dapat menggunakan aplikasi teks editor untuk pemrograman web seperti pada pembuatan script HTML dan PHP.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

0 komentar

Post a Comment