CSS merupakan singkatan dari Cascading Style Sheet. CSS digunakan untuk mengubah tampilan (style) dari halaman web. Sebagaimana yang kita ketahui, halaman web modern terdiri dari 3 komponen dasar: HTML untuk membuat struktur, CSS untuk tampilan, dan JavaScript untuk interaksi.
Jika halaman web diibaratkan sebuah bangunan, CSS adalah tampilan luar dari bangunan tersebut, seperti warna dinding atau warna atap. Kerangka dasarnya dibuat dari HTML. Dengan demikian, kita bisa dengan mudah menukar warna dinding bangunan tanpa perlu mengubah struktur dasarnya.
Begitu pula dengan halaman web. Menggunakan CSS, kita bisa mengubah tampilan website tanpa perlu menyentuh kode HTML. Apabila saat ini website kita memiliki warna mayoritas merah, minggu depan bisa menjadi biru hanya dengan menukar beberapa baris kode CSS.
Mengutip dari wikipedia:
“Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language”.
Terjemahan bebasnya:
“Cascading Style Sheets (CSS) adalah bahasa style sheet yang digunakan untuk mengatur tampilan dan format dari sebuah dokumen yang ditulis dengan bahasa markup”.
Terdapat 2 istilah penting yang perlu penjelasan tambahan, yakni: bahasa style sheet (stylesheet language) dan bahasa markup (markup language).
Istilah pertama :
Style sheet language adalah format bahasa khusus yang terdiri dari kumpulan kode untuk mengatur tampilan (style) dari sebuah dokumen. Sebagaimana yang akan kita lihat nanti dari sejarah CSS, pada awal perkembangannya terdapat berbagai variasi style sheet language yang bisa digunakan, dimana salah satunya adalah CSS.
Istilah kedua :
Markup language merujuk kepada dokumen yang dibuat menggunakan “tanda” atau “mark”. Salah satu contoh dari markup language ini adalah HTML (Hypertext Markup Language). Walaupun begitu, CSS tidak hanya digunakan untuk HTML saja, tapi bisa untuk bahasa markup lain seperti XML (Extensible Markup Language) dan SVG (Scalable Vector Graphics).
Kata Cascade dari kepanjangan CSS juga perlu kita bahas. Dalam bahasa inggris, cascade berarti
“air terjun kecil, riam, jeram, mengalir/berpancaran kebawah”.
Dimana maknanya adalah: Sesuatu yang mengalir dari atas ke bawah. Di dalam CSS, style atau aturan tampilan yang dibuat bisa saja saling menimpa satu sama lain, tergantung dari posisinya dan ke-spesifikan kode CSS tersebut.
Sebagai contoh, jika pada baris pertama kode CSS kita membuat perintah untuk mengubah warna paragraf menjadi biru, di baris kedua kita bisa menulis kembali perintah yang sama, tetapi kali ini mengubah warna tersebut menjadi merah. Konsep cascading ini akan kita bahas dengan lebih detail pada bab tersendiri.
Sebagai kesimpulan, dalam pengertian sederhana CSS adalah “format bahasa khusus yang digunakan untuk mengatur tampilan dari halaman web”.
Sama seperti HTML, CSS bukanlah sebuah bahasa pemrograman komputer, tapi bahasa struktur (structural language). CSS terdiri dari kode-kode sederhana berupa perintah ‘style’ tanpa fitur bahasa pemrograman seperti variabel, logika if, fungsi, dll. Oleh karena itu, CSS relatif mudah untuk dipahami.
Fungsi CSS
Seperti yang telah kita singgung sebelumnya, CSS berfungsi untuk mengatur tampilan (style) dari sebuah dokumen. Khusus dalam buku ini dokumen yang dimaksud adalah HTML.
Dengan menggunakan CSS kita bisa mengatur (hampir) seluruh tampilan dari HTML, seperti warna teks, gambar backround, besar font, posisi judul, tampilan layout, dll. Ditambah lagi CSS3 membawa banyak fitur lanjutan seperti color gradient, transitions, dan animations.
Keuntungan lain dari CSS, ia bisa digunakan oleh banyak dokumen HTML sekaligus. Sebagai contoh, untuk website yang terdiri dari ribuan halaman, kode CSS yang diperlukan bisa ditempatkan pada 1 file saja. Dengan mengubah beberapa baris kode pada file ini, tampilan seluruh halaman website akan ikut berubah.
Selain itu, CSS memiliki fitur ‘media type’ untuk mendeteksi tipe perangkat yang digunakan ketika mengakses halaman web, apakah itu dari layar komputer/smartphone, printer, screen reader, dll. Dengan demikian, kita bisa membuat style yang berbeda-beda untuk masingmasing perangkat ini. Misalnya jika sebuah halaman akan di print, kita bisa menghapus gambar background atau mengubah warna text agar lebih jelas ketika di print.
Pada CSS3, fitur media type disempurnakan lagi dengan ‘media query’. Menggunakan media query, kita bisa membuat halaman web yang dapat ‘menyesuaikan diri’ dengan ukuran layar.
.
Tipe website seperti ini dikenal dengan Responsive Web Design (RWD), atau cukup disingkat dengan Web Responsive.
Selain hal diatas, masih banyak fitur canggih CSS lainnya yang tidak bisa didapat jika menggunakan HTML saja. Dalam buku ini kita akan membahas sebagian besar diantaranya. Mulai dari dasar penulisan CSS, pengertian selector dan property, tipe-tipe selector, hingga cara membuat web responsive.
Khusus untuk web responsive, Google pun telah memutuskan untuk memberi nilai tambah bagi website ‘mobile friendly’. Dengan demikan, mau tidak mau anda harus menguasai cara membuat responsive web design mulai saat ini.
(http://www.formasi-artikel.ga)(http://www.formasi-artikel.ga/2015/12/berkenalan-dengan-css-bagian-1.html)
Lanjut Berkenalan Dengan CSS (Bagian 2)...