5. Pengantar CSS (Cascading Style Sheet)

5. Pengantar

CSS (Cascading Style Sheet)

5.1   Pengenalan CSS

CSS atau Cascading Style Sheet adalah kumpulan aturan-aturan pemformatan dokumen HTML yang mengontrol dan mendeskripsikan tampilan dari konten dalam sebuah halaman web ketika tampil pada web browser. Style Sheet merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, penggunaan style sheets merupakan kelebihan tersendiri untuk pembangunan halaman web untuk proyek yang besar. Cascading Style Sheet (CSS) technology support pada hampir semua web Browser, karena CSS telah di setandartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.

Style Sheet dapat juga disebut sebagai Template. Maksudnya adalah dengan menggunakan CSS, kita dapat mendefinisikan suatu style hanya sekali dan menggunakannya secara berulang-ulang dalam dokumen HTML di web kita. Jadi tidak perlu repot mengatur ulang style dari setiap tag HTML yang dibuat, cukup dengan merubah CSS-nya saja, hal ini juga dimaksudkan untuk menjaga konsistensi tampilan situs yang dibuat.

Style Sheet lebih banyak digunakan untuk membuat efek-efek sepesial di web, misalnya membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet.

5.2   Internal/External Style Sheet

Ketika kita menggunakan CSS untuk memformat suatu halaman, kita memisahkan antara konten dan style tampilannya. Konten dari halaman (yang berupa kode HTML) berada pada file HTML itu sendiri, sementara isi dari CSS yang mengatur tampilan kode HTML tersebut berada pada file lain atau berada pada bagian lain dari dokumen HTML tersebut. File CSS yang terpisah dari halaman HTML disebut External Style Sheets. Sedangkan CSS yang berada pada bagian dokumen HTML  (biasanya berada di bagian head kode HTML) disebut sebagai Internal Style Sheet. Mekanisme dari kedua cara diatas dapat dilihat pada gambar berikut, Gambar A untuk External Style Sheet dan Gambar B untuk Internal Style Sheet.

Penggunaan External Style Sheet lebih disarankan untuk pembangunan situs yang besar karena cukup dengan membuat satu style saja maka dapat di terapkan pada banyak dokumen HTML, sehingga apabila diperlukan perubahan maka cukup dengan merubah file CSS-nya saja.

5.3   Struktur CSS

Setiap aturan dari CSS dibagi menjadi 3 bagian yaitu: Selector, Property dan Value. Syntax atau aturan penulisan kodenya sebagai berikut: selector{property:value} Property dan Value diletakkan didalam tanda kurung kurawal ({ }) dan Selector berada sebelum tanda kurung kurawal, selain itu antara Property dan Value dipisahkan oleh tanda titik dua ( : ). Selector pada CSS sama dengan Tag atau Elemen pada HTML (misalnya: <h1>, <td>, <font> dll). Satu aturan CSS minimal terdiri dari 3, seperti contoh berikut:

p{color: blue;}

Artinya adalah:

1.      Selector, dalam contoh diatas adalah p atau paragraf (dalam HTML = tag <p>), artinya adalah Tag HTML yang menggunakan atau akan di ubah tampil menggunakan CSS.

2.      Property, dalam contoh diatas adalah color, (dalam HTML = atribut), merupakan usuran kualitas satu eleven seperti Height, Font-Style, Color dan lain-lain.

3.      Value, nilai dari property, dalam contoh diatas adalah blue, merupakan nilai yang menyatakan perubahan yang kita lakukan terhadap tampilan dari eleven seperti 45px, Verdana atau #000000. Jika value terdiri dari dua suku kata, maka value-nya ditulis diantara dua tanda kutip (“ ”) misalnya p{font-family:”Times New Roman”}.

Contoh diatas adalah contoh sederhana dari syntax CSS, kita bisa juga mengelompokkan berbagai macam property dalam satu aturan dan memisahkan tiap property dengan tanda titik koma ( ; ), seperti contoh berikut:

p { color: blue; text-align: right; font-family: tahoma; font-size: 14; } /* Dapat pula ditulis dengan cara */ p {color:blue; text-align:right; font-family:tahoma; font-size:2;}

Selain berbagai macam property bisa dikelompokkan dalam satu aturan, kita juga bisa menggunakan property yang sama pada lebih dari satu selector dengan masing-masing selector dipisahkan dengan tanda koma ( , ), seperti contoh berikut:

h1, h2, p {color: blue;}

Contoh sederhana diatas hanya menjelaskan bagaimana menuliskan suatu kode CSS, sedangkan mengenai bagaimana penggunaannya dalam kode HTML dapat dipelajari pada Modul Kegiatan.