Peran dan Fungsi Dari CSS – Pertama-tama saat ingin memulai belajar CSS kamu tentu harus paham betul pengertian dari CSS tersebut. Sebenarnya apa itu CSS? CSS adalah singkatan dari Cascading Style Sheets. Jika diterjemahkan ke bahasa Indonesia secara harfiah, CSS berarti “lembar penataan menurun”. Akan tetapi secara konteks, Cascading Style Sheets adalah kumpulan perintah yang digunakan untuk menjelaskan tampilan sebuah halaman situs web dalam mark-up language. Mark-up language atau bahasa markah adalah bahasa pemrograman yang biasanya digunakan membuat website.
Kalau kamu sudah mengenal atau mengetahui tentang HTML, nah itulah salah satu contoh bahasa mereka. HTML atau singkatan dari Hypertext Mark Up Language tergolong sebagai bahasa pemrograman yang paling standar dan lazim untuk digunakan dalam pembuatan halaman web. https://www.queenaantwerp.com/
HTML ini istilah nya adalah ada di “balik layar” tampilan halaman web yang kamu akses. Tatanan sebuah situs web akan berantakan tanpa ada nya bahasa pemrograman seperti HTML. https://www.queenaantwerp.com/
SEJARAH CSS
CSS pertama kali bermula sejak munculnya SGML pada tahun 1970-an. Sejak itu, CSS mengalami perkembangan yang sangat pesat. Format dasar dari CSS yang sering kali digunakan pada saat ini merupakan ide dari seorang programmer bernama Hakon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada bulan oktober 1994 di dalam konferensi W3C di Chicago. Illinois.
Lalu, beliau bersama dengan Bert Bos mengembangkan suatu standart CSS. Pada tahun 1996, SCC resmi dipublikasikan. Pengerjaan Proyek ini juga didukung oleh seorang progamer Thomas Reardon dari perusahaan software ternama, Microsoft. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style.
CSS sendiri adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS di standarisasikan, Netscape dan Internet Explorer melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
Versi untuk saat ini terdapat 3 versi dari CSS, yaitu CSS1, CSS2, dan CSS3.
– CSS dan HTML
Lalu, apa hubungannya HTML dengan CSS? Keduanya sangat berhubungan erat. CSS adalah kode-kode yang dipakai untuk mendesain sebuah laman HTML. Jika HTML diibaratkan sebagai seorang manusia, maka CSS adalah pakaian yang membuat penampilan menjadi semakin menarik. CSS akan membantu para web designer untuk mengubah tampilan teks (baik dari bentuk dan ukuran font maupun warnanya), menambahkan gambar, hingga mengubah latar belakang sebuah halaman HTML.
Keberadaan CSS bisa terlihat dengan adanya atribut warna teks. Di sini CSS memberi perintah berupa teks berwarna biru melalui tag <span> dengan atribut class=”warna”. Jadi setiap tag <span> muncul, teks yang mengikutinya akan berwarna biru. Pun demikian saat kamu ingin mengganti warnanya. Tinggal mengganti CSS pada tag <style> dari “blue” ke warna lain, maka teks yang awalnya berwarna biru akan berubah warna.
Setelah memahami hubungan antara CSS dengan HTML, mari lanjutkan belajar CSS ke poin selanjutnya yaitu tentang fungsi.
Belajar CSS lebih mudah dengan mengetahui fungsinya
Sebenarnya untuk fungsi CSS kamu sudah bisa mengetahuinya dari penjelasan sebelumnya. Pada dasarnya, CSS berfungsi untuk mendesain, membentuk, serta mengubah tampilan halaman sebuah website. CSS dapat bekerja dan berlaku melalui tag HTML. Dengan adanya CSS, tag HTML yang sederhana dapat diubah sehingga tampilan laman website pun menjadi terlihat lebih menarik dan efisien.
Cara kerja CSS
Untuk cara kerjanya sendiri kamu bisa melihat pada Gambar 1. CSS beroperasi melalui tag <style> dengan atribut class warna. Dengan adanya CSS pada HTML maka pengaturan warna teks akan menjadi lebih mudah. Saat kamu ingin mengganti warna teks cukup mengetikkan tag <span> tanpa harus menulis ulang perintah. Jadi dapat disimpulkan bahwa CSS akan menghemat waktumu dengan perintah-perintah yang efisien.
Hal ini bisa terjadi karena CSS sendiri dikembangkan untuk bisa mengubah tampilan laman website tanpa harus mengganti isi konten. Jika kembali pada perumpamaan manusia dan pakaian di poin sebelumnya, dengan CSS kamu tidak mengubah bentuk manusianya tapi hanya mengganti pakaiannya. Dengan begitu untuk mengubah dan memprogram ulang tampilan pada website pun bisa dilakukan dalam waktu cepat.
Peran CSS
Dari sini kamu dapat menyimpulkan bahwa peran dari CSS untuk website sangatlah penting. Tanpa adanya CSS, tampilan website akan menjadi membosankan atau bahkan membutuhkan waktu lama untuk loading. Bayangkan saja jika kamu hanya dapat bergantung pada HTML untuk membuat sebuah situs. Bukan cuma tampilan situs akan “hambar” tapi kamu juga butuh waktu lebih lama karena harus berulang kali mengetikkan perintah.
Keuntungan belajar CSS
Dengan belajar CSS kamu (sebagai seorang web designer) bahkan dapat lebih mudah mengendalikan website. Kamu tidak harus pusing-pusing untuk mengutak-atik HTML saat harus memprogram ulang tampilan laman. Bahkan pada CSS tingkat lanjut, kamu dapat mengatur website lewat medium yang lain seperti suara. Keuntungan lain dari belajar CSS ialah tingkat compatibility yang tinggi. CSS kompatibel dengan kebanyakan browsers dan sangat user-friendly.
Menurut website teknologi informasi Amerika Serikat, Lifewire, menguasai CSS bahkan bisa mendapatkan pemasukan tambahan. Kamu bisa menjadi seorang freelance web designer atau bahkan menjual jasamu pada pihak yang membutuhkan. Terlebih, CSS juga akan melatih kamu untuk membuat website yang beragam. Jadi kamu bisa membuat bervariasi website tanpa harus menghabiskan waktu untuk belajar ulang.
Macam-macam CSS
Saat sedang belajar CSS kamu perlu mengetahui bahwa CSS sendiri dibagi menjadi beberapa macam dengan penggunaan yang berbeda-beda. Hal ini dimaksudkan agar kamu mencoba mempraktikkan teori yang sudah dipelajari tidak mengalami kekeliruan. Setidaknya terdapat tiga macam CSS yang sering kali digunakan oleh web designer. Berikut penjelasannya.
– Inline style sheet
Pertama ada inline style sheet. Sederhananya, CSS model inline style sheet ini adalah CSS dengan perintah pemrograman yang letaknya ada pada objek. Contohnya kamu ingin mengubah sebuah tulisan pada laman tertentu di website milikmu, inline style sheet CSS harus menempel pada elemen tulisan tersebut. Kamu cukup menambahkan tag <style> saja untuk menerapkan CSS ini.
– External style sheet
Selain inline style sheet ada external style sheet. CSS external style sheet ini letaknya berbeda dengan laman yang akan diubah. Cara tersebut lebih praktis daripada inline style sheet sebab dapat menghemat ruang dan bisa digunakan berulang-ulang untuk laman web yang berbeda. Kamu bisa mengenali CSS tipe ini lewat tag <link rel>. Tag tersebut akan menghubungkan halaman coding pada external style sheet CSS yang terpisah.
– Embedded style sheet
Terakhir ada embedded style sheet. CSS model embedded style sheet ini sama seperti inline style sheet, sama-sama berada pada satu laman coding. Maka tidak membuat heran jika embedded style sheet terkadang disebut dengan internal style sheet. Biasanya CSS ini diapit oleh tag <head> </head> dan diawali dengan tag <style>. Embedded style sheet ini sering digunakan untuk mengatur laman web dengan tampilan yang unik. Misalnya dalam satu paragraf tulisan ada kalimat yang berbeda dan hal tersebut terus berulang.