CSS : Pengertian, Fungsi, & Cara Kerjanya

4 min read

CSS adalah

CSS adalah kependekan dari Cascading Style Sheet, sebuah bahasa pemrograman yang penting untuk dipelajari oleh seorang website developer. 

“Mengapa CSS penting?” 

“Bukankah pondasi sebuah website adalah bahasa markup HTML?”

Yup, benar sekali! HTML memang merupakan kunci utama yang berfungsi sebagai pondasi dasar pembangunan sebuah website. 

Dan website tetap bisa berjalan tanpa menggunakan CSS.

Namun perlu diketahui, tanpa CSS website Anda akan memiliki tampilan yang sangat sederhana. 

Pasalnya, HTML tidak dirancang untuk menentukan aspek visual pada suatu website. Bahasa markup ini lebih ditujukan untuk membagi struktur dokumen.

Nah, untuk Anda yang ingin mengetahui penjelasan lebih lanjut tentang apa itu CSS, langsung saja simak artikel di bawah ini. 

Selamat membaca!

Apa itu CSS?

CSS adalah

CSS adalah sebuah bahasa pemrograman yang digunakan untuk menjadikan halaman website lebih menarik dan variatif.

CSS dapat digunakan untuk mengatur desain, layout, dan variasi display untuk ditampilkan pada berbagai macam perangkat, ukuran layar, dan printer.

Dengan menggunakan CSS, pekerjaan seorang website developer juga semakin mudah. 

Bahasa pemrograman ini dapat mengontrol layout beberapa website sekaligus, dimana style definition nya tersimpan dalam .css files eksternal.

Sebenarnya, seorang website developer juga bisa mendekorasi situs menggunakan HTML saja. 

Namun proses yang ditempuh akan sangat panjang, rumit, dan tentunya jadi memakan biaya yang lebih banyak.

Misalnya, Anda ingin mengganti warna dari hitam menjadi biru, hijau, dan kuning pada suatu website dengan jumlah teks yang banyak; katakanlah 200 paragraf. 

Maka, Anda harus mengganti kode HTML pada tiap-tiap paragrafnya.

Pastinya hal ini akan sangat memusingkan dan menghabiskan waktu Anda yang berharga. 

Begini contoh script HTML yang harus ditulis saat ingin mengubah warna.

<font color=”blue”> Aksara Data Digital < / font>.

<br / >

<font color=”yellow”> Aksara Data Digital < / font>.

 

Lain dengan HTML yang harus dituliskan satu-persatu, CSS akan membuat seluruh warna teks berubah dengan otomatis tanpa harus memasukkan kodenya secara manual.

Itulah mengapa seorang website developer membutuhkan CSS, agar dapat bekerja dengan lebih cepat.

Baik untuk mengatur sesuatu yang sederhana maupun yang kompleks.

Sejarah Singkat Bahasa Pemrograman CSSSejarah CSS

Terciptanya CSS diawali dari ide besar dari Hakon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada konferensi World Wide Consortium (W3C) di Chicago, Illinois.

Konferensi tersebut diadakan pada bulan Oktober 1994. 

Proposal yang diajukan oleh Lie tersebut akhirnya di kembangkan bersama dengan Bert Bos menjadi CSS.

Selain itu, proyek pengerjaan CSS juga didukung oleh Thomas Reardon, seorang programmer dari Microsoft.

CSS 1 kemudian resmi dirilis kepada publik pada tahun 1996.    

Nama CSS diambil dari bentuk deklarasi style berbeda yang diletakkan secara berurutan.

Pada 17 Agustus 1996, pihak W3C (World Wide Web Consortium) merekomendasi CSS sebagai sebuah bahasa pemrograman standar dalam pembuatan website.

Kemudian pada tahun 1998, W3C menyempurnakan CSS dan menamainya sebagai CSS 2. Pada level ini, CSS dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar dapat ditampilkan pada printer.

Hingga pada akhirnya, terbitlah CSS 3 yang memiliki beberapa fitur baru yaitu:

  • Animasi – sehingga tidak lagi membutuhkan Adobe Flash dan Microsoft Silverlight.
  • Efek teks – ada tiga macam yaitu teks berbayang, kolom koran, dan word-wrap.
  • Jenis huruf eksternal – sehingga bisa menggunakan berbagai huruf yang tidak termasuk dalam web-safe font.
  • Efek pada kotak – ada tiga macam efek yang dapat diterapkan yaitu kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan.

Kini, CSS di maintain W3C oleh sebuah divisi bernama CSS Working Group.  Mereka membuat dokumen yang dikenal dengan nama specifications

Ketika sebuah specifications telah didiskusikan dan secara resmi oleh anggota W3C, dokumen tersebut akan disebut recommendation (proposal).

Specifications yang telah diresmikan disebut sebagai recommendation karena W3C tidak memiliki kontrol pada penerapannya secara nyata.

Software akan dibuat oleh perusahaan dan organisasi yang bergerak secara mandiri.

Baca juga: Bahasa Pemrograman PHP – Pengertian, Fungsi, & Cara Kerjanya

Fungsi CSSFungsi Cascading Style Sheet

Tentunya banyak fungsi yang diberikan oleh penggunaan CSS. Berikut penjelasannya:

1. Mempercepat Proses Desain

Seperti yang telah dibahas pada penjelasan sebelumnya, mendesain sebuah website menggunakan HTML akan menyita sangat banyak waktu, tenaga, dan biaya.

Perkara mengubah warna pada sebuah file HTML saja merepotkan.

Nah, ketika menggunakan CSS semua menjadi lebih cepat dan mudah. 

Anda tinggal mengetikkan satu kali fungsi CSS kemudian menggunakannya di berbagai halaman HTML.

Anda tidak perlu menyalin barisan kode fungsi dan mendeskripsikan semua warna, font, background dan lainnya secara terpisah berulang kali.

2. Membuat Tampilan Website Lebih Variatif

CSS memiliki Array Attribute yang lebih luas daripada HTML. Sehingga, dapat memberikan tampilan website yang lebih baik.

Jadi, Anda dapat memiliki lebih dari satu tampilan website.

3. Membuat Halaman Lebih Cepat Dimuat

Saat menggunakan bahasa pemrograman ini, Anda cukup menuliskan  satu aturan CSS saja dan menerapkannya pada berbagai file yang membutuhkan.

Jadi, file hanya mengandung sedikit baris kode yang harus dimuat pada proses download website.

Jumlah baris kode yang sedikit inilah yang membuat proses download menjadi lebih cepat.

4. Mempermudah Proses Pemeliharaan 

Dalam pembangunan sebuah website pasti memerlukan maintenance jangka panjang, terlebih lagi terkait tampilannya.

Pasti Anda sebagai pemilik website ingin memiliki tampilan yang semakin baik dan menarik sesuai dengan perkembangan tren, bukan?

Nah, CSS akan memudahkan Anda untuk mengubah tampilan berbagai halaman website.

Cukup dengan mengubah fungsi style di file CSS, maka seluruh tampilan yang menggunakan fungsi tersebut akan berubah secara otomatis.

Tidak harus diubah secara manual, satu-persatu. 

5. Membuat Optimasi ke Perangkat Lain Lebih Mudah

CSS memungkinkan Anda untuk mengoptimasi konten ke lebih dari satu perangkat. 

Contohnya ketika Anda memproses sebuah dokumen, namun secara tidak diduga harus menggunakan perangkat yang baru. 

Apabila menggunakan CSS, Anda bisa menyesuaikan tampilan dokumen di perangkat versi lama dengan perangkat versi baru. 

Baca juga: HTML – Pengertian, Sejarah, & Cara Kerjanya

Cara Kerja CSS

Bahasa pemrograman CSS secara default menggunakan Bahasa Inggris sederhana berbasis syntax. 

CSS akan bekerja dengan cara memisahkan kode-kode yang mengatur tentang visual website dan kode-kode yang mengatur tentang konten. 

Struktur dalam Bahasa Pemrograman ini cukup sederhana. Dalam CSS, aturan syntax nya tersusun dari sebuah selector dan declaration block. 

Di sini, Anda dapat memilih elemen yang mana yang diinginkan kemudian Anda dapat melakukan declaration terhadap elemen tersebut.

Selector akan mengarahkan elemen dalam HTML yang ingin Anda percantik visualnya. 

Declaration block sendiri mengandung satu atau lebih declarations yang penulisannya dipisahkan oleh tanda titik koma (;).

Nah, setiap declarations memiliki sebuah property name dan value yang penulisannya dipisahkan oleh titik dua (:).

Pada akhirnya declaration block ditutup dengan tanda kurung kurawal ({}).

Jenis-Jenis CSS

Menurut W3tech, terdapat tiga jenis CSS yang diklasifikasikan berdasarkan penggunaannya. Berikut penjelasannya:

Jenis-Jenis CSS

1. External Style Sheet CSS

External Style Sheet CSS adalah baris kode yang bisa langsung diletakkan di luar area object. 

CSS jenis ini dapat digunakan secara berulang pada beberapa objek sekaligus. External Style Sheet CSS juga dapat digunakan antar website, sehingga lebih menghemat ruang.

2. Inline Style Sheet CSS

Inline Style Sheet CSS adalah baris kode yang biasa diterapkan secara langsung pada objek yang ingin didesain ulang.

Contohnya saat Anda ingin merubah sebuah text berwarna hitam menjadi berwarna kuning. 

Pengguna CSS jenis ini hanya perlu membubuhkan tag <style> sehingga sangat mudah dan menghemat waktu pengerjaan. 

3. Embedded Style Sheet CSS

Internal Style Sheet CSS adalah aturan CSS yang bisa ditempatkan dalam dokumen HTML menggunakan elemen style untuk memuat aturan. 

Cirinya hampir sama dengan Inline Style Sheet CSS, karena diletakkan pada halaman yang sama pada suatu website.

Tag yang digunakan adalah < style > … </style> yang ditempatkan dalam tag <head> … </head>.

Penutup

Bisa kita simpulkan bersama bahwa CSS adalah bahasa pemrograman yang sangat penting untuk pembuatan sebuah website.

Dengan menggunakan CSS, Anda akan memiliki website dengan tampilan yang lebih menarik dengan proses pembuatan yang lebih mudah.

Bahasa pemrograman ini digunakan berdampingan dengan bahasa markup HTML dan bahasa pemrograman PHP.

Seperti website Aksara Data Digital – Platform Reseller Registrasi Domain Terbaik ini. Tampilannya jadi menarik dengan berbagai font tulisan dan background colorful dengan memanfaatkan CSS.