Kepanjangan dari CSS adalah Cascading Style Sheets, pengatur tampilan website. Kode tersebut menentukan warna, jenis huruf, jarak antarelemen, hingga posisi tombol di layar.
Bagi pemilik bisnis yang sedang menyiapkan website, CSS adalah alasan halaman toko bisa tampil rapi dan sesuai identitas merek. Yuk simak ulasan pengertian, fungsi, dan cara kerja CSS yang dibahas secara ringan untuk semua kalangan.
Apa yang Dimaksud dengan CSS?
CSS atau Cascading Style Sheets adalah bahasa penataan gaya untuk mengatur tampilan elemen di halaman web. Standarnya dikembangkan oleh World Wide Web Consortium (W3C) dan pertama kali dirilis pada tahun 1996.
Kemunculan CSS berawal dari keterbatasan HTML. Bahasa markup tersebut dirancang untuk menyusun isi halaman, seperti judul, paragraf, dan gambar, bukan untuk mendesain tampilannya.
Pada masa awal web, gaya teks diatur lewat tag HTML seperti <font> yang ditulis langsung di dalam konten. Cara tersebut merepotkan karena setiap elemen harus didefinisikan satu per satu.
CSS hadir untuk memisahkan urusan isi dan urusan tampilan. Dengan begitu, keduanya bisa dikelola sendiri-sendiri tanpa saling mengganggu.
Sebagai perbandingan, HTML ibarat bangunan toko lengkap dengan dinding dan rak. CSS adalah cat, pencahayaan, serta penataan etalase yang membuat pengunjung betah.
Fungsi CSS
CSS berfungsi memberi tahu browser bagaimana setiap elemen HTML harus ditampilkan. Kode tersebut tidak membuat elemen baru, melainkan menata elemen yang sudah ada.
Bagi pemilik bisnis, hasil kerja CSS terlihat langsung pada kesan pertama pengunjung. Berikut hal-hal yang diatur CSS pada sebuah website:
- Warna: latar halaman, teks, tombol, dan tautan agar selaras dengan identitas merek
- Tipografi: jenis huruf, ukuran, ketebalan, dan jarak antarbaris supaya teks nyaman dibaca
- Tata letak: posisi logo, menu, kolom, foto produk, dan bagian footer
- Ukuran dan jarak: lebar kolom, ruang kosong antarbagian, serta proporsi gambar
- Efek interaktif: perubahan warna tombol saat disentuh kursor, animasi halus, dan transisi antarbagian
- Responsivitas: penyesuaian tampilan di ponsel, tablet, dan layar komputer
Semua pengaturan tersebut menentukan apakah website terlihat profesional atau tidak. Isi halaman yang sama bisa tampil sangat berbeda ketika gaya CSS yang dipakai berbeda.
Fungsi lainnya adalah efisiensi. Satu aturan CSS dapat berlaku untuk puluhan halaman sekaligus, sehingga perubahan warna merek cukup dilakukan di satu tempat.
Perbandingan Tampilan Website Tanpa CSS dan dengan CSS
Cara termudah untuk mengerti peran CSS adalah membandingkan halaman yang sama sebelum dan sesudah gaya diterapkan. Isi halamannya identik, tetapi kesan visualnya berbeda jauh.
Perbandingannya dirangkum pada tabel berikut:
| Aspek | Tanpa CSS | Dengan CSS |
|---|---|---|
| Latar halaman | Putih polos | Warna atau gambar sesuai identitas merek |
| Huruf | Jenis dan ukuran bawaan browser | Jenis, ukuran, dan jarak baris yang dirancang khusus |
| Tautan | Biru dengan garis bawah | Warna dan efek yang selaras dengan desain |
| Tombol | Tampilan standar browser | Tombol berwarna dengan efek saat disentuh kursor |
| Tata letak | Elemen tersusun berurutan ke bawah | Kolom, menu horizontal, dan galeri produk yang tertata |
| Tampilan di ponsel | Sering terlalu kecil atau terpotong | Menyesuaikan lebar layar |
Bagi calon klien, tabel tersebut menunjukkan bahwa kesan profesional sebuah website tidak datang dari isi halaman saja. Sebagian besar kesan tersebut dibentuk oleh lapisan CSS.
Cara Kerja CSS
CSS bekerja lewat aturan bersintaks sederhana yang terdiri dari selector dan declaration block. Selector menunjuk elemen HTML yang ingin diubah, sedangkan declaration block memuat perintah gayanya.
Setiap deklarasi terdiri atas properti dan nilai yang dipisahkan tanda titik dua, lalu diakhiri titik koma. Seluruh deklarasi dibungkus tanda kurung kurawal.
Contoh berikut mengubah semua paragraf menjadi teks biru, berlatar merah muda, dengan ruang kosong 12 piksel di sekeliling teks:
p {
color: blue;
background: pink;
padding: 12px;
}
Selector sendiri terbagi menjadi beberapa jenis. Tiga jenis yang paling sering dipakai adalah:
- Selector elemen: menargetkan semua tag yang sama, misalnya seluruh paragraf
- Selector class: menargetkan sekelompok elemen yang diberi nama kelas, misalnya semua tombol beli
- Selector ID: menargetkan satu elemen unik, misalnya banner utama di beranda
Saat halaman dibuka, browser membaca HTML terlebih dahulu, lalu mencocokkan setiap selector CSS dengan elemen yang ada. Aturan yang cocok langsung diterapkan pada elemen tersebut.
Kata cascading pada namanya merujuk pada sistem prioritas aturan. Jika dua aturan bertabrakan, browser memilih yang lebih spesifik, atau yang ditulis paling akhir bila tingkatnya sama.
Alur kerjanya dapat diringkas menjadi empat tahap:
- Browser mengunduh file HTML dan CSS dari server
- Browser membaca struktur HTML dan menyusun elemen-elemennya
- Browser mencocokkan aturan CSS dengan elemen yang sesuai
- Browser menampilkan halaman lengkap dengan warna, huruf, dan tata letak
Bila file CSS gagal dimuat, pengunjung akan melihat halaman polos dengan teks hitam dan tautan biru. Kondisi tersebut menunjukkan betapa besar peran CSS pada tampilan website.
Properti CSS Dasar dan Contohnya
Ratusan properti tersedia di CSS, tetapi pekerjaan sehari-hari umumnya berkisar pada beberapa properti dasar. Tabel berikut merangkum properti yang paling sering dipakai beserta contohnya:
| Properti | Fungsi | Contoh |
|---|---|---|
color |
Warna teks | color: #333333; |
background |
Warna atau gambar latar | background: #F5F5F5; |
font |
Jenis, ukuran, dan ketebalan huruf | font: bold 18px Arial; |
margin |
Jarak di luar elemen | margin: 20px; |
padding |
Jarak di dalam elemen | padding: 12px; |
border |
Garis tepi elemen | border: 1px solid gray; |
width |
Lebar elemen | width: 50%; |
display |
Cara elemen ditampilkan dan disusun | display: flex; |
opacity |
Tingkat transparansi | opacity: 0.8; |
Setiap properti punya nilai yang berbeda-beda, sehingga kombinasi beberapa properti menghasilkan tampilan yang unik. Properti lain untuk sudut membulat, bayangan, dan animasi juga tersedia.
Jenis-jenis CSS
Terdapat tiga cara menerapkan CSS pada halaman web, dan perbedaannya dirangkum pada tabel berikut:
| Jenis CSS | Lokasi Penulisan | Cocok untuk | Kekurangan |
|---|---|---|---|
| Inline | Atribut style pada satu elemen | Perubahan cepat pada satu bagian | Sulit dirawat karena tersebar di berbagai tempat |
| Internal | Tag <style> di dalam satu halaman |
Halaman tunggal, seperti landing page | Tidak bisa dipakai ulang di halaman lain |
| External | File terpisah berekstensi .css | Website dengan sejumlah halaman | Membutuhkan satu file tambahan yang harus diunduh |
Bentuk kodenya berbeda pada setiap jenis. Inline CSS ditulis pada atribut style di dalam tag elemen:
<p style="color: blue;">Teks berwarna biru</p>
Internal CSS ditulis di dalam tag <style> pada bagian head halaman:
<head>
<style>
p {
color: blue;
}
</style>
</head>
External CSS disimpan di file terpisah, lalu dihubungkan lewat tag <link> di bagian head:
<head>
<link rel="stylesheet" href="gaya.css">
</head>
Isi file gaya.css berupa aturan CSS yang sama, tanpa tag tambahan:
p {
color: blue;
}
Sebagian besar website bisnis memakai external CSS. Satu file dapat mengatur seluruh halaman, dan browser menyimpannya di cache sehingga halaman berikutnya terbuka lebih cepat.
Ketiganya dapat dipakai bersamaan pada satu website. Bila terjadi bentrok, aturan inline umumnya mengalahkan aturan internal maupun external.
Pada proyek pembuatan website, TokoWeb umumnya memakai external CSS agar perawatan dan pengembangan di kemudian hari lebih mudah.
Sejarah dan Versi CSS
Konsep CSS pertama kali diusulkan oleh Håkon Wium Lie pada tahun 1994. W3C kemudian menetapkannya sebagai standar resmi pada tahun 1996.
Perkembangan versinya dirangkum pada tabel berikut:
| Versi | Tahun | Perkembangan Utama |
|---|---|---|
| CSS1 | 1996 | Pengaturan dasar untuk huruf, warna, latar, dan jarak |
| CSS2 | 1998 | Penambahan posisi elemen, tata letak lebih lengkap, dan dukungan media cetak |
| CSS 2.1 | 2011 | Perbaikan dan penyempurnaan CSS2 agar sesuai dengan cara kerja browser |
| CSS3 | Bertahap | Modul baru, seperti sudut membulat, bayangan, animasi, flexbox, dan grid |
Sejak CSS3, spesifikasi dipecah menjadi modul yang dikembangkan sendiri-sendiri. Karena itulah tidak ada rilis CSS4 tunggal, dan fitur baru terus hadir lewat pembaruan tiap modul.
Perkembangan tersebut memungkinkan efek visual modern, seperti bayangan dan sudut membulat, dibuat langsung dengan kode tanpa gambar tambahan.
Cara CSS Membuat Tampilan Website Responsif
Tampilan responsif berarti halaman menyesuaikan diri dengan lebar layar pengunjung. CSS mengatur penyesuaian tersebut lewat beberapa teknik:
- Media query: aturan yang hanya berlaku pada lebar layar tertentu, misalnya khusus ponsel
- Flexbox dan Grid: sistem tata letak yang membuat kolom dan kartu produk menata diri secara otomatis
- Satuan relatif: ukuran berbasis persen atau lebar layar, bukan angka tetap
- Gambar fleksibel: gambar mengecil mengikuti lebar wadahnya agar tidak keluar dari layar
Contoh berikut membuat kolom produk berjajar tiga di komputer, lalu bertumpuk penuh saat lebar layar 768 piksel atau kurang:
.daftar {
display: flex;
}
.kolom {
width: 33%;
}
@media (width <= 768px) {
.daftar {
display: block;
}
.kolom {
width: 100%;
}
}
Pada layar sempit, kolom berhenti berjajar dan disusun ke bawah sehingga teks dan gambar tetap terbaca di ponsel.
Google menilai versi ponsel sebuah website terlebih dahulu, sehingga tampilan responsif berkaitan erat dengan peluang muncul di hasil pencarian.
Kelebihan CSS bagi Website Bisnis
Manfaat CSS terasa langsung pada biaya perawatan dan kenyamanan pengunjung. Berikut kelebihan utamanya:
- Tampilan konsisten: warna, huruf, dan jarak sama di seluruh halaman
- Perawatan mudah: mengganti warna tombol cukup dilakukan di satu tempat
- Kode ringkas: aturan tidak perlu ditulis berulang-ulang pada setiap elemen
- Pemuatan efisien: file CSS yang sama dipakai ulang browser untuk halaman lain
- Tampilan responsif: satu website tetap rapi di ponsel, tablet, dan komputer
- Mudah disegarkan: desain bisa diperbarui tanpa menulis ulang isi website
Bagi pemilik bisnis, kelebihan tersebut berarti biaya perubahan di kemudian hari lebih terkendali. Pergantian warna merek atau penyegaran tampilan tidak menuntut website dibangun ulang dari nol.
Pengaruh CSS terhadap Kecepatan dan SEO Website
CSS tidak menentukan isi artikel, tetapi memengaruhi seberapa cepat dan stabil halaman tampil. Kedua hal tersebut termasuk faktor pengalaman pengguna yang diperhatikan mesin pencari.
Browser menunggu file CSS selesai diunduh sebelum menampilkan halaman. Akibatnya, file yang membengkak langsung terasa pada waktu muat.
Beberapa langkah yang membantu menjaga kecepatan dan performa SEO:
- Minify file: menghapus spasi dan komentar agar ukuran file lebih kecil
- Membersihkan aturan tak terpakai: file yang ramping lebih cepat diunduh
- Memanfaatkan cache: file external CSS disimpan browser sehingga kunjungan berikutnya lebih cepat
- Menetapkan ukuran gambar dan elemen: mencegah tampilan bergeser saat halaman dimuat, yang memengaruhi skor Cumulative Layout Shift
Contoh Penerapan CSS pada Website Bisnis
Tombol ajakan seperti “Pesan Sekarang” adalah elemen yang hampir selalu ada di website jasa maupun toko online. Tampilannya diatur dengan kode berikut:
.tombol {
background: #1A73E8;
color: white;
padding: 12px 24px;
border: 2px solid #1A73E8;
}
.tombol:hover {
background: #0B57B0;
}
Aturan tersebut menghasilkan tombol biru dengan teks putih dan ruang lega di sekelilingnya. Saat kursor diarahkan ke tombol, warnanya berubah menjadi biru lebih gelap sebagai isyarat bahwa tombol bisa ditekan.
Tanda titik pada .tombol menandakan class, yaitu nama yang dapat dipasang ke berbagai elemen sekaligus. Dengan cara tersebut, seluruh tombol di website otomatis seragam.
Bila warna merek berubah, pengembang cukup mengganti satu baris kode. Perubahan langsung berlaku di semua halaman yang memakai class tersebut.
Perbedaan HTML dan CSS
Kedua bahasa tersebut saling melengkapi dan hampir selalu dipakai berpasangan. Perbedaannya terletak pada tugas masing-masing:
- HTML: menentukan struktur dan isi halaman, seperti judul, paragraf, tautan, gambar, dan formulir
- CSS: menentukan tampilan struktur tersebut, seperti warna, ukuran, jarak, dan posisi
- HTML tanpa CSS: halaman tetap berfungsi, tetapi tampil polos dan kaku
- CSS tanpa HTML: tidak ada elemen yang bisa ditata, karena CSS tidak membuat elemen baru
Ada pula JavaScript yang mengurus fungsi interaktif, misalnya slider gambar atau kalkulator harga. Ketiganya membentuk fondasi hampir semua website modern.
Hal yang Perlu Disiapkan sebelum Desain Website Dibuat
Pemilik bisnis tidak perlu bisa menulis kode. Tugas pengembang adalah menerjemahkan preferensi tampilan menjadi aturan CSS yang rapi.
Bahan berikut mempercepat proses desain:
- Logo dalam format asli, sebaiknya PNG transparan atau SVG
- Warna merek lengkap dengan kode heksadesimal, misalnya #1A73E8
- Jenis huruf yang sudah dipakai pada materi cetak atau media sosial
- Contoh website lain yang tampilannya disukai sebagai referensi
- Daftar halaman yang dibutuhkan, seperti beranda, produk, tentang kami, dan kontak
- Foto produk atau tim dengan kualitas baik
Jika panduan merek belum tersedia, tim TokoWeb dapat membantu menentukan palet warna dan tipografi yang cocok dengan target pasar.
Tahapan Pembuatan Tampilan Website
Setelah bahan terkumpul, pembuatan tampilan website secara umum berjalan lewat tahapan berikut:
- Diskusi kebutuhan: menentukan tujuan website, target pasar, dan gaya visual yang diinginkan
- Pembuatan mockup: rancangan visual halaman dalam bentuk gambar sebelum kode ditulis
- Persetujuan desain: pemilik bisnis meninjau mockup dan memberi masukan
- Penulisan HTML dan CSS: desain yang disetujui diterjemahkan menjadi kode
- Pengujian tampilan: pemeriksaan di berbagai ukuran layar dan browser
- Revisi dan peluncuran: penyempurnaan detail, lalu website dipublikasikan
Pemilik bisnis paling berperan pada tahap kedua dan ketiga. Masukan yang jelas pada tahap tersebut menghemat waktu revisi setelah kode ditulis.
Tim TokoWeb mendampingi seluruh tahapan tersebut, mulai dari konsep tampilan sampai peluncuran. Kebutuhan desain dapat dibahas lewat layanan jasa pembuatan website TokoWeb.
Pertanyaan yang Sering Diajukan tentang CSS
- Apakah CSS termasuk bahasa pemrograman?
CSS lebih tepat disebut bahasa penataan gaya. CSS tidak dirancang untuk menjalankan logika program, melainkan untuk mengatur tampilan elemen HTML. - Apakah CSS wajib ada di sebuah website?
Secara teknis tidak wajib, sebab HTML tetap bisa tampil tanpa CSS. Namun tanpa CSS, tampilan menjadi polos dan kurang layak untuk kebutuhan bisnis. - Apa perbedaan CSS dan CSS3?
CSS3 adalah generasi CSS yang menghadirkan fitur modern, seperti sudut membulat, bayangan, animasi, flexbox, dan grid. Fitur tersebut dikembangkan sebagai modul terpisah. - Apa arti kata cascading pada CSS?
Cascading merujuk pada cara browser memilih aturan yang berlaku ketika beberapa aturan mengarah ke elemen yang sama. Urutannya ditentukan oleh sumber aturan, tingkat kekhususan selector, dan urutan penulisan. - Apakah pemilik bisnis perlu belajar CSS?
Tidak perlu. Cukup mengerti fungsinya agar kebutuhan tampilan bisa disampaikan dengan jelas kepada pengembang. - Apakah CSS memengaruhi kecepatan website?
Ya. File CSS yang besar atau berantakan memperlambat proses penampilan halaman, sehingga perlu dirapikan dan dikompresi.