Apa itu CSS? - Pengertian, Fungsi, dan Cara Kerjanya

Anda mungkin sering mendengar istilah CSS, terutama pada dunia programming. Istilah tersebut memang masih berhubungan dengan pemrograman website.

CSS adalah hal yang pasti akan selalu ada dalam pengetahuan pemrograman dasar bersamaan dengan HTML. Keduanya menjadi basic knowledge dari seorang programmer, khususnya seorang Front End Developer.

Lalu, apa itu CSS? Berikut kami rangkumkan informasi lengkapnya untuk Anda, meliputi pengertian, sejarah, fungsi, jenis, hingga contohnya. Jadi, mari baca lebih lanjut!

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa stylesheet yang mengatur tampilan dan tata letak situs web. Perlu dicatat, CSS bukan bahasa pemrograman, melainkan bahasa untuk mendeskripsikan gaya tampilan dokumen HTML.

Seiring dengan HTML, bahasa ini adalah dasar untuk desain web. Situs web akan tetap menjadi teks biasa dengan latar belakang putih tanpa adanya CSS, sehingga tidak akan menarik dan terkesan datar atau monoton.

Kegunaan bahasa ini adalah untuk menyederhanakan proses pembuatan website dengan mengatur elemen di bahasa markup. Pemakaiannya adalah untuk mendesain website front end.

CSS dapat mengatur gaya huruf, warna huruf, ukuran huruf, baris antar paragraf, serta jenis background.

Selain itu, bahasa ini juga bisa untuk mendesain layout, efek untuk website, dan variasi tampilan di berbagai perangkat berbeda.

Sejarah Perkembangan CSS

Ilustrasi Perkembangan CSS (Unsplash)

Format dasar CSS saat ini merupakan ide dari seorang programmer yang bernama Hakon Wium Lie yang termuat dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) yang diterbitkan pada 10 Oktober 1994 dan kemudian dipresentasikan dalam konferensi Mosaic and the Web di Chicago, Illinois, pada tahun yang sama.

Kemudian, beliau mengembangkan suatu standard cascading style sheets bersama dengan seorang temannya yang bernama Bert Bos.

Pada akhir tahun 1996, W3C resmi menerbitkan CSS level 1 sebagai rekomendasi standar. Pengembangannya juga didukung antara lain oleh Thomas Reardon dari Microsoft.

Penulis maupun pembaca dapat menggunakan cascading style sheets pada halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen.

Programmer menggunakan bahasa ini untuk memisahkan antara isi dokumen yang ditulis dengan HTML atau bahasa markup lainnya dengan presentasi dokumen cascading style sheets.

Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, serta mengurangi kompleksitas dan pengulangan pada struktur isi.

Sekarang, penggunaan cascading style sheets semakin meluas dan terus berkembang. Hal ini juga akan mempermudah seorang web designer dalam mengembangkan suatu halaman website (situs).

Fungsi CSS

Beberapa fungsi dari cascading style sheet adalah sebagai berikut.

1. Halaman Lebih Cepat

Ketika menggunakan bahasa ini, hal yang diperlukan hanya menulis satu aturan dan menerapkannya di berbagai file.

Jadi, code tersebut akan lebih singkat dan nantinya dapat membuat proses download menjadi lebih cepat.

2. Mempercepat Proses Desain

Fungsi selanjutnya adalah mempercepat proses desain karena Anda hanya perlu mengetikkan satu kali fungsi CSS lalu menggunakannya di banyak halaman HTML. Jadi, Anda pun tidak perlu lagi menyalin satu per satu desain ke setiap file halaman.

Bahasa ini dapat mengatur semua tampilan pada aspek file yang berbeda, kemudian Anda dapat menentukan file dan mengintegrasikannya di atas markup HTML.

3. Mengatur Style dalam Website

Bahasa ini memiliki properti tampilan yang jauh lebih beragam daripada atribut gaya bawaan HTML. CSS dapat menentukan font selain default, menentukan warna dan ukuran teks, menerapkan warna background, mengatur tampilan tabel, hingga menempatkan elemen di posisi tertentu.

Kekurangan dan Kelebihan CSS

Berikut merupakan kekurangan beserta dengan kelebihan cascading style sheets:

Kelebihan CSS

Berikut ini adalah beberapa kelebihan cascading style sheets.

1. Bahasa ini sangat fleksibel, sehingga nyaman untuk dilihat.
2. File CSS berukuran cenderung kecil, sehingga bandwidth yang dibutuhkan juga kecil.
3. Antara dokumen CSS dengan HTML dapat dipisah, sehingga memberi kemudahan pembuat website untuk mengubah atau mengedit file cascading style sheets.
4. Satu file cascading style sheets dapat digunakan untuk beberapa halaman.
5. CSS menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML

Kekurangan CSS

Berikut ini adalah beberapa kekurangan cascading style sheets

1. Tampilan yang berbeda-beda pada browser
2. Beberapa browser lama yang tidak support bahasa ini
3. Dibutuhkan waktu yang lumayan lama dalam membuat dan mendesainnya,

Jenis CSS Style

Berdasarkan cara penulisannya, ada tiga jenis cascading style sheet, yaitu sebagai berikut.

1. Internal Style Sheet

Internal style sheet (disebut juga embedded style sheet) adalah kode cascading style sheet yang penulisannya dalam tag <style> dan posisinya berada di dalam bagian <head> dokumen HTML. CSS jenis ini berguna untuk membuat custom khusus dalam satu halaman website.

Kelebihan internal style sheet antara lain:

• Editing yang mudah di tiap halaman website
• Tidak perlu melakukan upload file CSS karena termasuk ke dalam HTML
• Internal stylesheet bisa memakai ID dan Class
• Perbaikan error yang mudah

Kekurangan internal style sheet antara lain:

• Kurang efisien, karena harus menuliskan ulang untuk penggunaan di beberapa halaman website
• Memperlambat performa website karena memiliki CSS sendiri di tiap halamannya.
• Ukuran file menjadi lebih besar.

2. External Style Sheet

External Style Sheet jauh lebih praktis penggunaannya, karena kodenya ditulis dalam file .css terpisah lalu dipanggil dari dokumen HTML dengan tag <link>. Penggunaan jenis ini dapat digunakan secara berulang pada objek sekaligus bahkan antar website, sehingga lebih menghemat ruang.

Kelebihan external style sheet, antara lain:

• Ukuran file lebih kecil
• Code rapi
• Respon website lebih cepat
• Bisa digunakan untuk beberapa halaman website berbeda

Kekurangan external style sheet adalah :

• Kurang cocok untuk halaman custom
• Halaman website rawan berantakan saat file gagal load dengan sempurna

3. Inline Style Sheet

Pada jenis ini, Anda menuliskan kode CSS langsung pada atribut style di setiap elemen HTML. Oleh karena itu, setiap elemen dapat memiliki style yang berbeda sesuai kebutuhan. Hal ini tergolong kurang efisien daripada jenis cascading style sheet lainnya.

Cara Kerja CSS

Standarnya, CSS memakai bahasa Inggris sederhana berbasis syntax. HTML berfungsi untuk mendeskripsikan konten, lalu dibantu CSS dengan memberikan sentuhan modifikasi. Kombinasi kinerja keduanya dapat memaksimalkan tampilan website seperti yang Anda inginkan.

Di dalam struktur yang sederhana ini, CSS terdiri dari selector dan declaration block. Pengaturan elemen dapat dilakukan sesuai dengan keinginan yang juga dapat memungkinkan Anda melakukan deklarasi terhadap elemen tersebut. Akan tetapi, terdapat berbagai rules yang harus diperhatikan.

Selector mengarah ke elemen HTML yang ingin diubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.

Umumnya, deklarasi CSS berakhiran dengan tanda titik koma, sedangkan declaration block terapit oleh tanda kurung kurawal.

Contoh CSS

Ilustrasi Pemrograman CSS (Pankaj Patel/Unsplash)

Berikut ini adalah contoh CSS mudah yang dapat Anda gunakan.

1. Menentukan Format Paragraf

Contoh dari pemrograman ini adalah untuk mengatur format paragraf. Contohnya adalah semua paragraf dalam satu halaman memiliki ukuran 120% dan berwarna abu-abu tua, kode yang ditambahkan adalah:

p { font-size: 120%; color: dimgray; }

2. Mengubah Warna Link

Catatan berikut ini menunjukkan warna link yang telah ditentukan dengan cascading style sheet, yaitu:

• Normal: Warna link belum pernah dibuka dan tidak diklik
• Visited: Warna link sudah pernah dibuka
• Hover: Warna ketika meletakkan kursor di atas link
• Active: Warna ketika link diklik

Kode yang dapat digunakan untuk menentukan keempat warna tersebut, yaitu:

a:link { color: gray; }
a:visited { color: green; }
a:hover { color: purple; }
a:active { color: teal; }

3. Menentukan Huruf Kapital atau Kecil

Berikut ini adalah contoh kode agar teks dalam sebuah paragraf tampil sebagai huruf kapital kecil (small caps), huruf kapital semua, atau huruf kecil semua. Pertama, buat aturan CSS-nya:

.smallcaps { font-variant: small-caps; }
.kapital { text-transform: uppercase; }
.kecil { text-transform: lowercase; }

Lalu, terapkan salah satu class tersebut pada elemen HTML:

<p class="smallcaps">Paragraf Anda.</p>

4. Membuat Kotak Teks

Pada umumnya, kotak teks berguna untuk menonjolkan sebuah informasi yang penting. Berikut ini adalah kode yang dapat digunakan:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Hasil dari kode tersebut adalah kotak dengan border berukuran 5px dan warna ungu di sekitar teks yang dapat ditandai dengan class important. Untuk menandai teks dengan kelas tersebut, dapat ditambahkan class sebagai berikut.

<p class="important">Paragraf Anda.</p>

5. Membuat Link

Fungsi dari dibuatnya tombol link adalah agar tautan terlihat lebih mencolok. Kode di bawah dapat digunakan untuk membuat tombol link:

a:link, a:visited, a:hover, a:active {
  background-color: green;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

Berikut adalah penjelasan bagian-bagian dari kode di atas:

• a:link, a:visited, a:hover, a:active memastikan bahwa tombol akan selalu muncul meskipun sudah diklik atau ditunjuk dengan kursor.
• background-color menentukan warna tombol.
• padding menentukan ukuran tombol.
• text-align menentukan letak teks dalam tombol, misalnya di pinggir atau di tengah.
• text-decoration menentukan ada atau tidaknya garis bawah di teks.
• display: inline-block memungkinkan untuk mengatur tinggi dan lebar tombol.

6. Menandai Baris dalam Tabel

Fungsi dari kode ini adalah untuk membuat baris dalam tabel memiliki warna yang berbeda ketika ditunjuk dengan kursor. Kode yang dapat digunakan adalah:

tr:hover { background-color: #ddd; }

Macam-Macam Property CSS

Pada umumnya, menuliskan suatu property berarti juga menuliskan value-nya. Properti ini berfungsi untuk memberi efek khusus pada elemen HTML yang nantinya tampil pada website.

1. Border

Border adalah properti cascading style sheet yang berfungsi untuk mengatur dan membuat garis tepi pada HTML dengan banyak variasi. Adapun contoh dari border properti, seperti:

1. Border-left-width: Mengatur lebar garis kiri
2. Border-color: Mengatur warna dari garis
3. Border-style: Mengatur style dari garis
4. Border-top: Membuat garis atas
5. Border-right: Membuat garis kanan

2. Background

Properti background berperan dalam mengatur latar belakang tampilan website.

Contohnya adalah sebagai berikut:

1. Background-color: Memberi warna pada latar belakang
2. Background-image: Memberi gambar pada latar belakang dari suatu element
3. Background-position: Mengatur posisi gambar pada latar belakang

3. Color

Properti color memiliki fungsi untuk mengubah warna text, background, dan lain sebagainya.

4. Float

Properti float berfungsi untuk mengatur text agar dapat melipat di sekitar elemen gambar, tetapi juga bisa Anda gunakan untuk layout dan style lainnya.

Contoh:

float: right; untuk menentukan elemen harus mengapung di sebelah kanan elemen yang menampungnya.

5. Font

Gunakan properti ini untuk menentukan ukuran dan jenis font serta gaya teks yang akan tampil di website nantinya.

Contoh:

1. Font-weight: Mengatur ketebalan dari text
2. Font-size: Mengatur ukuran font sesuai keinginan
3. Font-family: Mengatur jenis font
4. Font-style: Mengatur style font pada text
5. Font-variant: Mengatur varian huruf, misalnya small caps (huruf kapital kecil)

6. Height

Ini adalah properti yang berfungsi untuk mengatur tinggi dari suatu elemen secara otomatis dalam nilai seperti pixel, cm, em, persen, dan sebagainya.

7. Padding

Properti padding berfungsi untuk membuat ruang kosong di dalam elemen, yaitu jarak antara konten dan border-nya. Adapun ruang di luar border diatur dengan margin.

Contoh:

1. Padding-top : mengatur ruang elemen dengan konten bagian atas
2. Padding-right: mengatur ruang elemen dengan konten bagian kanan
3. Padding-bottom: mengatur ruang pada elemen dengan konten bagian bawah
4. Padding-left: mengatur ruang pada elemen dengan konten bagian kiri

8. Margin

Margin berfungsi untuk membuat ruang kosong di sekitar elemen bagian luar. Hal tersebut memungkinkan untuk membuat margin sisi bawah, atas, kiri, dan kanan secara terpisah.

Contoh:

1. Margin-top: Mengatur jarak antar elemen bagian atas
2. Margin-right: Mengatur jarak elemen bagian kanan
3. Margin-bottom: Mengatur jarak elemen bagian bawah
4. Margin-left: Mengatur jarak antar elemen bagian kiri

Cara Menerapkan CSS ke HTML

Terdapat tiga cara untuk menerapkan gaya (style) ke dokumen HTML.

1. Penerapan Sebaris dengan Elemen HTML

Penggunaan bisa dalam atribut style dari elemen HTML apa saja untuk mendefinisikan aturannya. Aturan-aturan ini akan teraplikasikan pada elemen itu saja, seperti:

<p style="color: navy; font-size: 18px;">Hello World!</p>

2. Embedded Dokumen HTML

Penempatan aturan cascading style sheet ke dalam dokumen HTML menggunakan elemen <style> yang diletakkan di dalam bagian <head>, seperti contoh berikut.

<head>
  <style>
    p { color: navy; }
  </style>
</head>

3. File External Style Sheet

Elemen ini dapat berfungsi untuk menyertakan file style sheet eksternal dalam dokumen HTML. Lembar gaya eksternal adalah file teks terpisah dengan ekstensi “.css”.

Aturan gaya ditulis dalam file teks tersebut, lalu dipanggil dari dokumen HTML mana pun di dalam bagian <head> menggunakan elemen <link>, seperti berikut.

<link rel="stylesheet" href="style.css">

Sebagai catatan, setiap peramban (browser) juga memiliki gaya bawaan (user agent stylesheet), misalnya ukuran huruf untuk heading atau warna biru untuk tautan. Gaya bawaan ini akan ditimpa oleh aturan CSS yang Anda tulis. Karena gaya bawaan dan dukungan fitur bisa sedikit berbeda antar-browser, sebaiknya uji tampilan website Anda di beberapa browser.

Nah, itulah tadi penjelasan mengenai apa itu cascading style sheet beserta dengan jenis, contoh dan cara kerjanya. CSS adalah alat yang paling bagus dalam mendekorasi web semenarik mungkin sesuai dengan yang diinginkan.

Saat ini, sudah banyak website yang menggunakan cascading style sheet. Hal ini karena CSS adalah bahasa stylesheet standar web yang sangat fleksibel. Jadi, sebaiknya segera implementasikan desain website Anda dengan CSS.

Konsultasikan kebutuhan Anda!