Assalamualaikum wr wb
A. Pengertian
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

CSS merupakan pemrograman wajib yang harus dikuasi oleh setiap pembuat program (Web Programmer), terlebih lagi itu adalah pendesain web (web designer).

CSS saat ini dikembangkan oleh World Wide Web Consortium (W3C) dan menjadi bahasa standar dalam pembuatan web. CSS difungsikan sebagai penopang atau pendukung, dan pelengkap dari file html yang berperan dalam penataan kerangka dan layout.

CSS mampu di berbagai platform, maksudnya dapat dijalankan pada berbagai macam sistem operasi dan web browser. Secara umum, yang dilakukan oleh CSS adalah pengaturan layout, kerangka, teks, gambar, warna, tabel, spasi, dan lain sebagainya. Kita akan mengetahui masing-masing pengaturan tersebut pada pembahasan selanjutnya.    

B. Sejarah CSS
Pada tahun  1996, mungkin tepatnya pada tanggal 17 Desember 1996, W3C (World Wide Consortium) menjadikan CSS sebagai pemrograman standar dalam membangun suatu dokumen web. Tujuannya tentu saja untuk mengurangi pembuatan tag-tag. Pada saat itu, CSS masih berversi 1, yang memiliki dukungan terhadap:
  • Font (Jenis, Ketebalan dan lain-lain).
  • Warna Teks, Latar Belakang dan Lain-lain.
  • Text atribut, misalnya spasi antar baris, kata, dan huruf.
Melihat dukungan seperti itu, tentu kurang lengkap bukan? Oleh karena itu, pada tahun 1998, W3C menyempurnakannya dengan hadirnya CSS versi 2 (CSS2), yang menjadi standar hingga saat ini. CSS dari tahun ke tahun terus dikembangkan dan hingga kini CSS telah mencapai versi ke-3 (CSS3).

Mungkin hanya itu sedikit tentang sejarah CSS

C. Mengenal Versi CSS
Saat ini, CSS telah mencapai pada versi yang ketiga, di mana pada setiap versi selalu ada peningkatan. Pada subbab ini penulis akan mengenalkan kepada anda, apa sih perbedaan antara CSS-1, CSS-2, hingga CSS-3.

  • CSS-1, dikembangkan dan berpusat pada formatting dokumen HTML.
  • CSS-2, dikembangkan untuk bisa memenuhi kebutuhan terhadap format dokumen supaya bisa ditampilkan di printer. Pada CSS-2 ini mendukung juga dalam penentuan posisi konten, downloadable, font, table-layout, dan media type untuk printer.
  • CSS-3, merupakan versi pengembangan dari sebelumnya. Pada versi ini terdapat beberapa tambahan dan mengarah pada efek animasi. Namun, saat ini belum semua didukung oleh web browser.


D. Sifat CSS
Ada dua sifat CSS, yaitu internal  dan  eksternal. Bedanya apa ya?...
Internal, jika kode CSS yang akan dibuat tersebut kita masukkan atau sisipkan ke dalam file kode html. Namun, cara ini akan sungguh merepotkan jika kita membuat file lain dengan metode yang sama. Artinya, kita harus melakukan cara yang sama berulang-ulang (menyisipkan kode CSS ke dalam kode HTML). Bagaimana jika kita membuat 10 file HTML? Maka kita juga akan menyisipkan kode CSS sebanyak 10 kali pula.
Eksternal, pembuat kode CSS dan HTML terpisah. Artinya, kita membuatkan satu file CSS untuk kemudian file CSS tersebut dapat kita panggil berulang-ulang guna dihubungkan dengan file HTML (melalui linked).  Cara ini memang sangat disarankan untuk pembuatan desain web karena dapat menyingkat waktu pembuatan.

E. Mengapa CSS
Banyak di antara mereka yang selalu bertanya  mengapa CSS? ..  bukankah memakai tabel kode HTML saja sudah cukup?.. memang.. tanpa CSS pun web dapat dibangun, namun tahukah anda.. salah satu kunci kesuksesan web agar banyak pengunjung adalah tampilan yang menarik, interaktif, cepat diakses, dan lain-lain. Jika web sangat lambat untuk loading, tentu pengunjung juga akan merasa bosan, malah akan menutup browser web mereka sebelum seluruh informasi dalam web tersebut ditampilkan.
Dengan kita menggunakan CSS, akan banyak keuntungan yang dapat kita peroleh, di antaranya:
  1. Memisahkan pembuatan dokumen (CSS dan HTML).
  2. Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web.
  3. Akses Web lebih cepat di-loading (Mempercepat pembacaan HTML).
  4. Flesibel, Interaktif, Tampilan lebih menarik dan nyaman dipandang.
  5. Ringan FIlesize/Bandwith lebih kecil.
  6. Dapat digunakan pada semua web browser.
F. Bagaimana CSS Bekerja
Cara kerja CSS sangat mudah, kita cukup menuliskan berdasarkan style (selektor, id dan class), maka secara otomatis style tersebut akan bekerja pada dokumen HTML. Tidak ada cara kerja khusus yang diterapkan oleh CSS. Berbeda dengan bahasa pemrograman lain, semisal PHP.
Kita cukup mengatur selektor, id, dan class, untuk kemudian id dan class tersebut kita sesuaikan dan terfapkan pada kode HTML.

Contoh Penulisan Dasar CSS :
Selector {    Properti : Value;}
Contohnya Sebgai berikut :
P {    Color : blue;}
Keterangan :
  1. Selector = P
  2. Properti = Color
  3. Value = Blue 

Karena kita telah menambahkan selektor P, maka setiap dokumen html memakai tag <p>, secara otomatis warna textnya akan berubah menjadi Biru (color : blue).

Jiak kita menggunakan Id, maka formatnya menjadi sepeti berikut :
#Selektor {
    Properti : Value;
}
Dan apabila kita menggunakan Class, maka formatnya akan menjadi :
.Selektor {
    Properti : Value;
}
F. Refrensi
Wassalmualaikum wr wb.

TAGS : |