Pemahaman Dasar CSS : Membangun halaman website

Cascading Style Sheets (CSS) adalah kumpulan batasan (Rule) untuk memformat dan mengendalikan tampilan isi suatu halaman website (webpage). Penempatan rule (kode) style CSS diletakkan terpisah dari isi halaman kode HTML. Isi halaman kode HTML diletakkan dalam file HTML, sedangkan kode style CSS dapat berupa file lain, yaitu file .css atau bisa juga sebagai salah satu bagian dari file HTML yang ditaruh dalam tag <head>.

Dengan kata lain ada 2 jenis style CSS, yaitu CSS yang bersifat internal dan CSS bersifat eksternal.

Penulisan style CSS eksternal (disimpan dalam file .css) dijelaskan sebagai berikut:

-   Dihubungkan dengan LINK, sehingga lebih mudah melakukan edit.

-   Jika ingin melakukan perubahan format halaman web,  cukup dilakukan perubahan  
     pada file .css.  Maka halaman web yang terhubung dengan file tersebut akan berubah.

-   Kelebihan CSS eksternal, yaitu memungkinkan diterapkannya banyak fitur untuk
    halaman website dengan syntaks – atau penulisan rules  –  sederhana dan mudah
    dipahami. Akan lebih mudah dipahami, jika Anda familiar terbiasa dengan konsep 
    penggunaan style pada program pengolah-kata seperti microsoft word.

-   Penggunaan style CSS eksternal lebih menghemat waktu dan lebih mudah mengedit
     tampilan webs. File .css fungsinya seperti master untuk halaman website. Maksudnya
     jika ingin mengubah seluruh halaman website, maka cukup mengubah file .css saja,
     tanpa perlu mengedit satu per satu halaman web. Sebab sekali ditulis rule (batasan-
     batasannya) maka akan berlaku untuk seluruh website.

-   Loading time halaman website lebih cepat karena ukuran file tiap webpage menjadi 
     lebih kecil.

-   Style CSS eksternal memungkinkan dihasilkan efek yang lebih beragam, sehingga
     memungkinkan untuk lebih mempercantik tampilan web yang kemungkinan itu tidak
     dapat diperoleh dari HTML.

Kekurangannya: Beberapa kode CSS berjalan baik pada suatu browser tetapi tidak untuk semua browser.

Penulisan batasan-batasan (Rules) pada style CSS internal diletakkan pada file HTMl – tepatnya  di bagian tag  <head>

Kekurangannya :

Jika ingin dilakukan perubahan format pada halaman-halaman website, maka harus dilakukan banyak pengeditan pada semua file.

Bagian ini mengulas proses kerja style CSS. Instruksi CSS diberikan dalam bentuk rules (batasan-batasan). Lalu lembar style akan mengumpulkan rules tersebut. Rules adalah pernyataan yang diciptakan oleh HTML dan disebut sebagai SELECTOR yang dinyatakan dalam bentuk PROPERTY  dan VALUE.

h1 { color: red;}   atau ditulis dengan cara lain, warna dalam bentuk kode   h1 { color: #F00;}

Efeknya semua judul artikel (teks tag h1) berwarna merah. Selector h1, property color dan value = red   

Property CSS dan kesatuan VALUE-VALUE yang mendukungnya disebut DEKLARASI.  Bentuk Deklarasi bisa dalam bentuk paling sederhana seperti contoh diatas atau satu selector terdiri dari beberapa pasangan property dan value.  Web designer sering harus mengubah beberapa property style sekaligus dalam satu selector, dimana setiap property dipisahkan oleh ‘;’ (titik-koma). Dengan kata lain pengelompokan property dalam deklarasi menggunakan tanda ‘;’ sebagai pemisah.

h1 {
         color: red;
         font-family: helvetica, sans-serif, verdana;
         text-align: center;
         font-size: 16px;
         font-weight: bold;
}

KIta juga dapat melakukan pengelompokan selector seperti juga pada deklarasi dan untuk pemisahan antar-selector diguanakan tanda ‘,’  (koma).

h2, p, …, …, … {
         color: white;
         font-family: arial;
         text-align: left;
         font-size: 12px;
}

Penggunaan Class dimaksudkan untuk menggunakan kembali tag HTML yang tersedia (bisa berulangkali digunakan). Artinya, Anda bisa memiliki beberapa style paragraf copyright berbeda yang diletakkan di beberapa tempat. Ini merupakan salah satu kelebihan CSS dan langkah yang tepat untuk menghasilkan  website design yang konsisten. Nama class selalu diawali tanda ‘.’ (titik). Sebagai contoh Class bernama catatan (digunakan untuk mengatur text copyright.

.catatan {
font-family: Helvetica, sans-serif;
font-size: 10PX;
>}

catatan : Kekuatan sebenarnya style CSS adalah Custom Selector dan Class salah satu diantaranya.

Tag custom ini disebut juga ID Selector hanya digunakan untuk elemen tunggal, seperti tag <div> yang memuat isi footer atau sidebar. Sebuah ID Selector diterapkan pada tag yang benar-benar memiliki atribut id.  Nama DIV selalu diawali dengan tanda ostotroph (#).

#footer {
color: white;
background: black
border: thin solid red;
}

Tag custom ini misal diterapkan pada:   <div id=”footer”>Copyright@Website-Design.blogspot.com</div>

---

Catatan:
Anda dapat menggunakan kombinasi CLASS dan DIV ketika membuat layout halaman website.