Kalau kamu sering membuka website, pasti sadar deh kalau tampilannya selalu berbeda-beda. Ada yang simpel dengan dominasi warna putih, ada juga yang penuh warna dengan animasi keren. Semua itu bukan hanya hasil dari HTML, tapi juga karena adanya CSS.
CSS atau Cascading Style Sheets adalah bahasa yang digunakan untuk mengatur tampilan dan desain website. Jadi, kalau HTML itu ibarat kerangka rumah, CSS adalah cat, dekorasi, dan furnitur yang bikin rumah terlihat menarik dan nyaman dipandang.
Fungsi Utama CSS
Sebelum bahas lebih jauh soal cara kerja CSS, kita kenalan dulu dengan fungsinya:
-
Mengatur Warna dan Font
CSS bikin teks di website lebih enak dibaca dengan pilihan warna dan jenis huruf yang sesuai. Bayangin kalau semua teks di website pakai font standar dan warna hitam saja, pasti membosankan kan? -
Mengatur Layout
Dengan CSS, posisi elemen bisa diatur sesuai kebutuhan. Misalnya mau taruh gambar di kanan, teks di kiri, atau bikin konten terbagi jadi beberapa kolom. Semua bisa diatur dengan mudah. -
Membuat Website Responsif
Website sekarang harus bisa dibuka di berbagai perangkat, mulai dari laptop, tablet, sampai HP. CSS membantu supaya tampilan tetap rapi meskipun ukuran layar berbeda-beda. -
Membuat Animasi dan Efek
Kamu pasti suka lihat tombol yang berubah warna ketika di-hover atau teks yang muncul dengan animasi. Itu semua bisa dibuat dengan CSS tanpa harus ribet pakai kode tambahan.
Cara Kerja CSS
Nah, sekarang masuk ke bagian penting: cara kerja CSS.
CSS bekerja dengan memberikan style pada elemen-elemen HTML. Misalnya kamu punya teks <h1>Halo Dunia</h1>, secara default tampilannya hanya teks besar berwarna hitam. Kalau pakai CSS, kamu bisa ubah jadi warna biru, font tebal, bahkan ditaruh di tengah halaman.
Secara garis besar, cara kerja CSS adalah:
-
Selektor
CSS memilih elemen HTML yang mau di-style. Contohnyah1,p, atau.class. -
Properti
Setelah elemen dipilih, CSS mengatur tampilannya dengan properti. Misalnyacolor,font-size,margin, ataubackground. -
Nilai
Properti diberi nilai sesuai kebutuhan. Contoh:color: red;berarti teks akan jadi merah.
Contoh sederhana:
h1 {
color: blue;
text-align: center;
}
Kode di atas membuat semua teks <h1> jadi warna biru dan berada di tengah halaman.
Selain itu, cara kerja CSS juga bisa ditulis dengan tiga metode:
-
Inline CSS → langsung ditulis di dalam tag HTML.
-
Internal CSS → ditulis dalam bagian
<style>di file HTML. -
External CSS → ditulis di file terpisah dengan ekstensi
.csslalu dipanggil di HTML.
Biasanya, metode external CSS yang paling banyak dipakai karena lebih rapi dan mudah dikelola.
Kenapa CSS Itu Penting?
Tanpa CSS, website akan terlihat polos dan membosankan. Dengan CSS, website jadi lebih hidup, interaktif, dan menarik bagi pengunjung. Apalagi di era digital sekarang, tampilan website yang bagus bisa meningkatkan kepercayaan orang terhadap sebuah brand atau bisnis.
Kalau kamu mau terjun ke dunia pembuatan website, menguasai cara kerja CSS adalah langkah awal yang penting banget sebelum lanjut ke level yang lebih kompleks seperti JavaScript atau framework frontend.
Belajar CSS Lebih Dalam
Buat kamu yang tertarik belajar, sekarang sudah banyak cara buat mulai. Bisa lewat video gratis di internet, artikel, atau kursus intensif. Nah, kalau kamu butuh pembelajaran yang lebih terstruktur dan langsung praktik, kamu bisa ikut paket kursus Frontend Developer di DUMET School.
Di kursus ini, kamu bakal belajar HTML, CSS, JavaScript, dan framework modern yang banyak dipakai industri. Jadi, bukan cuma tahu teori, tapi juga bisa langsung bikin website interaktif dengan tampilan profesional.