Apa itu CSS?
Mengapa ia terlihat semakin penting? Karena ketika saya belajar tiga bahasa web ini, yakni HTML/XML, CSS dan Javascript, saya melhat yang paling banyak terlibat dalam urusan desain adalah CSS.
Oh ya perlu di ingatkan lagi, HTML bukan bahasa pemrograman ia hanya bahasa markup untuk membangun sebuah halaman website.
Kalau bahas CSS biasanya kita mendapatkan penjelasan begini:
- CSS adalah singkatan dari 'Cascading Style Sheets'
- CSS menjelaskan bagaimana elemen HTML akan ditampilkan di layar, kertas, atau di media lain. CSS membentuk HTML bagaimana cantiknya ia seperti yang kita lihat di layar monitor apapun. Dengan CSS kita melihat hitam, putih, merah, jingga dan warna warni tampilan HTML di layar monitor. Dengan CSS kita melihat bulatan, lingkaran, persegi, animasi hingga berbagai jenis tampilan font.
- CSS menghemat banyak pekerjaan. Itu dapat mengontrol tata letak beberapa halaman web sekaligus
- Stylesheet eksternal disimpan dalam file CSS
Walaupun HTML adalah inti dalam membangun web namun tanpa CSS, HTML hanyalah suatu yang 'telanjang' dan tanpa CSS HTML seperti seorang manusia yang tidak mengenakan pakaian. Namun tidak hanya sampai disana, dalam perkembangannya CSS melampaui hal hal yang kita sebutkan di atas. Dalam beberapa kasus ia bahkan menggantikan beberapa fungsi Javascript dalam menentukan 'prilaku' HTML di halaman web.
Bagaimana ya saya harus menjelaskannya dengan sederhana? Begini:
Di dunia web ada bahasa mark up, ya dia adalah HTML! Ia hanya tool mark up artinya bukan bahasa programming tulen. Namun, dengannya kita bisa membangun sebuah halaman website. Hanya dengan HTML? Yang sedianya hanya bahasa mark up dan bukan bahasa pemrograman tulen? Ya!
Namun dua bahasa pemrograman front end yakni yang kita kenal sebagai CSS dan Javascript telah melengkapinya. Tanpa kedua bahasa ini maka kita hanya akan melihat halaman web itu sama semuanya, sama dan monoton. Seperti tampilan awal dunia web ketika di bangun pada zaman dahulu kala (maksud saya di awal HTML ditemukan dan diaplikasikan ke dunia web).
Jika tadi kita menyinggung CSS ibarat pakaian, dan Javascript itu ibarat perilaku. Maka CSS itu bajunya si HTML dan Javascript itu ibarat perilaku dan kepribadiannya. Lupakan Javascript, kita sedang membahas CSS.
Dengan CSS kita melihat halaman web yang berbeda beda dalam segala hal. Beda warnanya, beda navigasinya, beda penampakan bodynya. Dengan pengaturan CSS template di buat sehingga kita mengenali bedanya template viomagz dengan template hasil desain editblogtema. Dan berton ton stok template tampak tidak sama. Itulah hasil pekerjaan CSS dalam membentuk HTML.
Tentu saja javascript berperan namun secara kasat mata, secara visual, atau penampakan lahiriah orang akan mudah melihat warna warni, bentuk, dan lingkaran. Itu semua di lakukan oleh CSS.
Di dunia modern teknik dan rekayasa desain menggunakan CSS menjadi semakin berkembang hingga CSS memasukan versi ketiga, belum lagi terhitung projek projek dan framework, sebut saja CSS Compass, less dan sass, yang dapat bekerja pada platform web tertentu dengan sangat baik.
Apa yang dapat dilakukan CSS terhadap halaman blog?
a. CSS vs Javascript
Pada templatenya? Banyak! Lihat menu navigasi halaman blog editblogtema ini ia hanya trik CSS, tanpa javascript. Kalian dapat melihat tampilannya yang responsif berbeda beda pada setiap ukuran layar? Di buka pada tampilan layar desktop ia adalah bar horisontal, namun ketika di buka pada halaman seluler, ia menjadi hamburger menu dengan animasi yang hidup dan intuitif. Salut buat Adelina Sofyan yang telah merancangnya semalaman.
CSS dalam beberapa hal dapat bekerja setara dengan Javascript karena ia dapat memanipulasi karakter dan perilaku web, ketika itu kita dapat mengabaikan Javascript.
b. Contoh murni CSS tanpa Javascript:
Dan CSS itu ringan kalau tidak bisa dikatakan super ringan, perhatikan bagaimana sebuah hamburger menu begitu hidup saat di klik! Silahkan klik hamburger menu (garis bersusun tiga) dan lihat reaksinya.
See the Pen CSS Hamburger Menu by Sufyan Yaan (@sufyan-yaan) on CodePen.
Murni CSS! Tentu saja tadinya (awal mengenal HTML) saya menyangka membuat hamburger menu yang terasa begitu intuitif harus melibatkan javascript, ternyata CSS murni dapat melakukannya.
c. contoh dengan CSS dan Javascript:
Alasannya pada saat pertama di w3school tempat pavorite saya belajar daring secara otodidak membuat menu seperti di atas adalah dengan menggunakan javascript, perhatikan contoh berikut:
See the Pen animated hamburger menu with css dan JS by Sufyan Yaan (@sufyan-yaan) on CodePen.
Hasilnya sama saja, bukan? Contoh pertama kode CSSnya panjang karena di tulis untuk menghasilkan reaksi berupa animasi buka dan tutup. Pada contoh kedua kita menggunakan Javascript sehingga kode CSSnya terlihat pendek sekali. Perintah yang diberikan oleh Javascript terhadap HTML adalah:function myFunction(x) { x.classList.toggle("change"); }
Kesimpulannya:
Dengan belajar CSS kalian akan mengerti bagaimana HTML bekerja, dan akan meberikan pengertian apa beda peranannya dengan bahasa front end lainya yaitu Javascript. Dan dengan CSS kalian akan dapat membuat sebuah template menjadi lebih indah, lebih intuitif namun tetap ringan.
Namun lebih dari itu dengan CSS kalian akan mendapatkan pengatahuan yang lebih luas tentang seluk beluk dunia web dan membuka cakrawala untuk pengkodean web dan terutama dalam mengembangkan skill web desain.
Walaupun Javascript tetap sangat penting namun CSS makin kesininya menjadi semakin penting.
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!
Share: