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 lebih rapi, 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;
}
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 lebih rapi, 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;
}
