Jangan Ngaku Web Desainer Kalo Tidak Tau Dasar CSS
coding css Design web
Berkenalan Dengan CSS
CSS adalah dunianya web design. Jika anda ingin mempelajari cara mendesain web, CSS mutlak
harus dikuasai. Kali ini kita akan membahas pengertian CSS, fungsi CSS, dan melihat sekilas
contoh penggunaan CSS dalam proses pembuatan web.
harus dikuasai. Kali ini kita akan membahas pengertian CSS, fungsi CSS, dan melihat sekilas
contoh penggunaan CSS dalam proses pembuatan web.
Pengertian CSS
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.
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.
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.
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.
![[Teks Deskripsi] Burung Cendrawasih – Ciri-ciri dan Habitat Cendrawasih](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPI69fOrBgbQBVj6DfUHRFtLnGcw4sqPFyDW0zZ3c6-VjIkw_k-rQCwdSJw2Dupr11WHyPseeScYtAss2QzGCJX5IOkKB08ip1iIOyD_46Kg3mHCs7T2kG_FfX5DkBzzv28flC8D5qQU/s72-c/cen.jpg "[Teks Deskripsi] Burung Cendrawasih – Ciri-ciri dan Habitat Cendrawasih")
![[Terjemahan] President Sukarno of Indonesia : Speech at the Opening of the Bandung Conference, April 18 , 1955](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLqguLH-yVr3Q_t8DEPWc1dExwrDCIq1yk0wFOz9bkWwA-_Mtd0xDdcmTjfuS-8VbOLdhh16hgM_bhuWulhAWtFfQIvyv6-L35vyVERkdFDMWw395mRihLwh6t2A0tsaSHp80k1n8qi2g/s72-c/sokarno.jpg "[Terjemahan] President Sukarno of Indonesia : Speech at the Opening of the Bandung Conference, April 18 , 1955")
![[Teks Anekdot] “Rokok”](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg77uUAkMkXZmb5lAFazGeu_YdnW3BZYEFqpw0_qLFARiz0ocJDF4WTZ9KYjxtJY0w9IgK84WDzB_Q3LSaQN59kW1GqUKgOUeHbb9fOcuIPuKR34iFU5Sr5Ro7ABahbmSuXjAq0D0xCb0A/s72-c/Noo-smoking.jpg "[Teks Anekdot] “Rokok”")