Saat ini banyak bahasa
pemrograman yang populer. salah satunya adalah bahasa pemrograman CSS(Cascading
Style Sheets). CSS adalah salah satu styling language yang dapat mewarnai
dan mendesain suatu halaman website.Markup language ini biasanya dipasangkan
dengan markup language(bahasa marka) seperti HTML.
A. Sejarah dan
Perkembangan CSS
CSS (Cascading Style Sheet)
adalah standar pembuatan dan pemakaian style untuk dokumen terstruktur. CSS
digunakan untuk mempersingkat penulisan tag HTML \ seperti font, color,
text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan
tulisan. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman
web yang ditulis dengan HTML maupun XHTML. Meskipun demikian, bahasanya sendiri
dapat dipergunakan untuk semua jenis dokumen XML termasuk juga SVG dan XUL.
Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).
CSS pertama kali bermula sejak
munculnya SGML pada tahun 1970an. Sejak kemunculannya tersebut, CSS mengalami
perkembangan yang sangat pesat. Format dasar CSS yang banyak kita gunakan
sekarang ini merupakan ide dari seoang programmer bernama Hakon Wium Lie yang
tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada
bulan Oktober 1994 (dalam konferensi W3C di Chicago, Illinois). Kemudian,
beliau bersama-sama dengan seorang temannya yang bernama Bert Bos mengembangkan
suatu standard CSS.
Pada akhir tahun 1996, CSS
telah resmi dipublikasikan (dan menyusul kemudian CSS Level 1 pada bulan
Desember). Pengerjaan proyek ini juga didukung oleh seorang programmer bernama
Thomas Reardon dari perusahaan software ternama, Microsoft. CSS digunakan oleh penulis
maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan
berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara
isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan
presentasi dokumen (yang ditulis dengan CSS).
Pemisahan ini dapat
meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol
terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur
isi. CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang
berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak,
suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga
alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan
secara berbeda, baik dari segi gaya tampilan atau skema warna dengan
menggunakan CSS.
B. Penjelasan Bahasa Pemrograman CSS
Apa itu CSS ?
CSS atau (Cascading Style
Sheets) adalah kumpulan perintah yang digunakan untuk menjelaskan tampilan
sebuah halaman situs web dalam mark-up language.
Salah satu contoh bahasa mereka
mark-up paling populer adalah HTML (Hypertext Mark Up Language) yang
tergolong sebagai bahasa pemrograman standar dan lazim digunakan dalam
pembuatan halaman web.
HTML ini istilahnya ada di
''balik layar'' tampilan halaman web yang kamu akses. Tatanan sebuah situs web
akan berantakan tanpa adanya bahasa pemrograman seperti HTML.
Apa Saja Font di CSS ?
Di CSS, ada 5 jenis font
standar yaitu font serif,sans-serif,monospace,cursive,dan fantasy. disetiap
jenis font tersebut terdapat puluhan nama font yang bisa digunakan sebagai
value dari property font-family. Misalnya : Times New Roman,Arial,Courier
New,Comic Sans,dsb.
Apa Struktur Kode CSS ?
Struktur kode CSS terdiri dari
tiga bagian: Selektor,Blok Deklarasi,Properti dan nilainya.
Apa Hubungan Antara 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.
Bagaimana Cara Memulai CSS ?
CSS menggunakan bahasa Inggris
sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang
mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat
untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang
semata-mata untuk mendeskripsikan konten. Sebagai contoh: <p>This is a
paragraph.</p>.
Satu yang menjadi pertanyaannya
sekarang, bagaimana caranya style paragraf? Struktur syntax CSS cukup
sederhana. Struktur ini memiliki selector dan declaration block. Pilih elemen
yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan terhadap
elemen tersebut. Sangat mudah, kan?
Ada berbagai rule yang harus
diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.
Selector mengarah ke elemen
HTML yang ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih
banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.
Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.
Mari kita lihat contoh di bawah ini:
Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold).
Apa Peran
CSS ?
Dari sini
kamu bisa menyimpulkan bahwa peran CSS untuk website sangatlah penting. Tanpa
adanya CSS, tampilan website akan membosankan atau bahkan membutuhkan waktu
lama untuk loading.
Bayangkan
saja kamu hanya bisa 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 bisa lebih mudah
mengendalikan website. Kamu tidak harus pusing-pusing mengutak-atik HTML saat
harus memprogram ulang tampilan laman. Bahkan pada CSS tingkat lanjut, kamu
bisa mengatur website lewat medium yang lain seperti suara.
Keuntungan
lain dari belajar CSS adalah tingkat compatibility yang tinggi. CSS kompatibel
dengan kebanyakan browsers dan sangat user-friendly.
Terlebih,
CSS juga akan melatihmu untuk membuat website yang beragam. Jadi kamu bisa
membuat bervariasi website tanpa harus menghabiskan waktu untuk belajar ulang.
Apa Saja
Macam-macam CSS ?
Saat
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
ada tiga macam CSS yang sering digunakan oleh web designer. Berikut
penjelasannya:
- Inline
Style Sheet
Pertama
ada inline style sheet. Sederhananya, CSS model ini adalah CSS dengan perintah
pemrograman yang letaknya ada pada objek.
Misalnya
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 ini letaknya berbeda dengan
laman yang akan diubah. Cara ini lebih praktis daripada inline style sheet
karena bisa menghemat ruang dan bisa digunakan berulang-ulang untuk laman web
yang berbeda.
Kamu bisa
mengenali CSS tipe ini lewat tag <link rel>. Tag ini akan menghubungkan
halaman coding pada external style sheet CSS yang terpisah.
- Embedded Style Sheet
Terakhir ada embedded style sheet. CSS model ini sama seperti inline style sheet, sama-sama berada pada satu laman coding. Maka tidak mengherankan jika embedded style sheet terkadang disebut dengan internal style sheet. Biasanya CSS ini diapit oleh tag <head> </head> dan diawali dengan tag <style>.
- CSS sangat mudah untuk
dipelajari dan digunakan.
- CSS memisahkan antara Desain
dan Konten Web/Blog.
- Pengaturan Desain dapat
dilakukan seefisien mungkin.
- Karena satu css dapat dipakai
beberapa kali ,maka dapat menghemat penulisan kode.
- Mempersingkat waktu kerja, baik
saat membuat maupun saat modifikasi halaman Web/Blog.
- Ukuran file HTML jadi lebih kecil, karena biasanya CSS disimpan di file terpisah (External Stylesheet).
Kekurangan CSS :
- CSS sangat menyita
waktu karena tidak semua browser mengartikan sintaks-sintaks CSS yang sama.
- Kadang desain sudah
terlihat rapih di suatu browser namun ketika dicoba di browser lain malah
jadi acak-acakan.
- Kekurangan tersebut dapat diatasi dengan script-script khusu(CSS Hack).
CSS memiliki andil yang besar dalam pembuatan website. Tanpa adanya CSS tanpilan halaman web akan terlihat membosankan. Dari sisi web designer sendiri, CSS akan membantu mereka untuk menghemat waktu karena tidak harus lagi mengetikkan perintah yang sama.CSS dibuat untuk dapat bekerja bersama dengan bahasa markup seperti HTML. Biasanya CSS digunakan untuk mengatur tampilan halaman.
Penulis : M.Khairud Daffa (Mahasiswa kelas 1G Prodi Sistem Informasi FST UIN Sulthan Thaha Saifuddin Jambi).
Sumber:
https://www.matawebsite.com/blog/sejarah-dan-perkembangan-css
https://www.dewaweb.com/blog/belajar-css-pengertian-peran-fungsi-dan-macamnya/
Selamat, 100 (60%)
BalasHapusAlhamdulillah terimakasih pak🙏
HapusAlhamdulillah terimakasih pak🙏
BalasHapusPosting Komentar