CSS (Cascading Style Sheet) secara sederhana adalah sebuah metode yang digunakan untuk mempersingkat penulisan tag HTML, seperti font, color, text dan tabel menjadi lebih ringkas sehingga tidak terjadi pengulangan penulisan.
CSS digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS, memungkinkan Kita untuk menampilkan halaman yag sama dengan format berbeda.
CSS merupakan teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
Saat ini terdapat 3 versi CSS (CSS1, CSS2, CSS3) mayoritas property – property yang digunakan adalah CSS2 karena property CSS3 masih dapat berubah – ubah selama pengembangan.
Kegunaan CSS
Beberapa kegunaan CSS diantaranya :
- Mempersingkat penulisan tag HTML. Penulisan tag dengan property dan nilai yang sama tidak perlu dituliskan pada setiap tag HTML.
- Mempercepat proses rendering atau pembacaan HTML karena tidak terdapat pengulangan penulisan.
- Mudah untuk memelihara (maintain) skrip : karena CSS dapat dibuat terpisah maka tidak perlu merombak semua elemen atau property dalam HTML.
- CSS dapat melakukan apa yang tidak bisa dilakukan oleh HTML seperti memberikan warna pada input box atau scrollbar.
Aturan Penulisan CSS
CSS memiliki aturan dalam penulisannya, yang terdiri atas Selector dan Declaration.
- Selector : mengidikasikan elemen atau elemen – elemen yang akan di deklarasikan.
- Declaration : untuk mendeskripsikan property dan nilai yang akan digunakan pada selector.
CSS Declaration yang berada didalam kurung kurawal terdiri dari 2 (dua) bagian property dan Value yang dipisahkan oleh tanda titik dua “ : ”. Kita dapat menentukan beberapa property dalam satu deklarasi, masing – masing dipisahkan dengan tanda titik koma “ ; “.
Cara Penulisan CSS
Cara penulisan skrip CSS dibagi menjadi 3 (tiga) bagian, yaitu :
- Inline Style Sheet
Penulisan skrip CSS didalam elemen HTML. Untuk metode ini fungsinya hamper sama dengan menuliskan property pada tag HTML, penggunaannya untuk hal – hal tertentu saja. Misalkan memberi warna hijau pada tag “<p>” maka cara penulisannya sebagai berikut :
<p style=”color:green”>
Penulisan skrip CSS dilakukan pada tag pembuka suatu element html. Property style akan men-support semua property yang di-support oleh CSS.
- Embedded Style Sheet
Penulisan skrip CSS didalam dokumen HTML. Metode ini menggunakan tag <style> dan </style>
Contoh :
<style type=”text/css>
p {color : red}
</style>
Biasanya penulisan skrip CSS ini dilakukan pada bagian elemen “head”.
- Linked Style Sheet / External Style Sheet
Penulisan skrip CSS di halaman yang berbeda atau terpisah dari HTML. Jadi, Kita tinggal melakukan link ke file CSS yang telah dibuat. Untuk metode ini, menggunakan tag <link rel> yang ditempatkan pada bagian tag <head>. Metode ini paling banyak digunakan dalam penulisan CSS. Linked style sheet merupakan metode penulisan yang paling banyak dipakai pada pengembangan website.
Beberapa keuntungan menggunakan aturan style ini diantaranya :
- Menghemat Kita mengulangi aturan style yang sama di setiap halaman.
- Dapat mengubah tampilan beberapa halaman dengan mengubah hanya pada style sheet – nya saja daripada masing-masing halaman. Ini berarti lebih mudah untuk memperbarui website Anda jika Anda ingin, misalnya, mengubah gaya font yang digunakan dalam semua judul atau mengubah warna semua tautan.
- Setelah pengunjung ke situs Anda mengunduh CSS dengan halaman pertama situs Anda yang menggunakannya, halaman berikutnya akan lebih cepat untuk memuat (karena browser menyimpan salinan style sheet dan aturan tidak perlu diunduh untuk setiap halaman). Ini juga mengurangi ketegangan pada server (komputer yang mengirim halaman web ke orang yang melihat situs) karena halaman yang dikirim lebih kecil.
- Style sheet dapat bertindak sebagai template style untuk membantu penulis yang berbeda mencapai style sheet dokumen yang sama tanpa mempelajari semua pengaturan style individu.
- Karena halaman web tidak mengandung aturan gaya (style rules), berbagai style sheet dapat dilampirkan ke dokumen yang sama. Jadi, Anda dapat menggunakan dokumen HTML yang sama dengan satu style sheet saat viewer berada di komputer desktop, style sheet lain saat pengguna memiliki perangkat genggam (mobile), style sheet lain saat halaman sedang dicetak (print), style sheet lain saat halaman sedang dilihat di TV, dan sebagainya. Anda dapat menggunakan kembali dokumen yang sama dengan style sheet berbeda untuk kebutuhan pengunjung yang berbeda.
- Style sheet dapat mengimpor dan menggunakan style dari style sheet lain, memungkinkan untuk pengembangan modular dan penggunaan kembali yang baik.
- Jika style sheet dihapus, Anda dapat membuat situs lebih mudah diakses bagi mereka yang memiliki keterbatasan penglihatan karena Anda tidak lagi mengendalikan font dan skema warna.
Oleh karena itu, cukup adil untuk mengatakan bahwa setiap kali Kita menulis seluruh situs, Anda harus menggunakan style sheet eksternal untuk mengontrol penyajiannya (daripada meletakkan aturan CSS di halaman web individual).
Untuk Mendalami dasar penggunaan CSS silahkan cek Buku
Dasar Penggunaan CSS pada Pengembangan Web
Salam Belajar IT
