Apa itu css..?
CSS (Cascading Style Sheet)
merupakan suatu bahasa program web yang digunakan untuk mengendalikan
dan membangun berbagai komponen dalamn web yang digunakan untuk
mengendalikan dan membangun berbagai komponen dalam web sehingga
tampilan web akan lebihrapi, terstruktur dan seragam.
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.
Sejarah Singkat 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).
Oh gitu.. iya cukup singkap bukan, namanya juga sejarah singkat CSS.
Mengenal Berbagai Macam 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.
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.
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. Fleksibel, interaktif, tampilan lebih menarik dan nyaman dipandang.
5. Ringan pada filesize/Bandwith lebih kecil.
6. Dapat digunakan pada semua web browser.
Bagaimana CSS itu 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. CSS
bekerja apa adanya.. mengalir mengikuti aliran yang telah ditentukan..
kok malah puitis gini yah??
Kita cukup mengatur selektor, id,
dan class, untuk kemudian id dan class tersebut kita sesuaikan dan
terfapkan pada kode HTML (penulis akan membahasnya lebih lanjut). Dan
secara otomatis pula CSS itu akan bekerja pada file HTML.. cukup simple
bukan?
Contoh Penulisan Dasar CSS
Ada baiknya
sebelum kita membahas lebih dalam, kita harus mengenali contoh penulisan
dasar terlebih dahulu. Secara umum, penulisan dasar CSS tidak lepas
dari keberadaan selector, id, class, dan value. Lihat format penulisan
berikut:
Selector {
Properti: value;
}
Contohnya sebagai berikut:
P {
Color: red;
}
Keterangan:
Selektor: P
Properti: Color
Value: Red
Maksudnya
mengalir apa adanya itu seperti ini, karena kita telah menambahkan
selektor P , maka setiap dokumen HTML memakai tag <P>, secara
otomatis teksnya akan berubah menjadi warna merah (color: red).
Jika kita menggunakan Id, maka formatnya menjadi seperti berikut:
#selektor {
Properti: value;
}
Dan apabila kita menggunkaan Class, maka formatnya menjadi:
.selektor {
Properti: value;
}
