CSS

Kenapa CSS-mu Nggak Jalan-jalan Ini Alasannya

Pasti pernah ngalamin kan, udah nulis kode CSS berbaris-baris, tapi pas dilihat di browser, kok tampilannya gitu-gitu aja? Warna nggak berubah, ukuran nggak mau gede, padahal rasanya udah bener ngetiknya. Rasanya campur aduk antara kesel, bingung, sama pengen nyerah aja. Tenang, kamu nggak sendirian. Ini pengalaman klasik buat siapa aja yang baru atau bahkan yang udah lumayan lama mainin kode web. Ada banyak banget alasan kenapa CSS yang kamu tulis tuh kayak nggak dihiraukan sama browser. Nah, di artikel ini kita bakal bedah satu per satu penyebab paling umum biar kamu nggak pusing lagi nyari kesalahannya. Yuk, kita mulai!

1. Link CSS-mu Belum Terhubung ke HTML

Ini nih, masalah paling dasar tapi sering banget terlewat. Ibaratnya mau nyetrika baju tapi kabel listriknya belum dicolokin. Kode CSS-mu ada, file HTML-mu ada, tapi mereka belum dikasih tahu buat kerja bareng. Kamu perlu menghubungkan file CSS (biasanya .css) ke file HTML-mu (.html) pakai tag .

Contoh yang bener:

html



    
    
    Judul Halaman

Perhatikan bagian . Pastikan:

rel="stylesheet": Ini ngasih tahu browser kalau file yang dilink itu adalah stylesheet.
href="style.css": Ini adalah lokasi file CSS-mu. Pastikan path-nya bener. Kalau file CSS-mu ada di dalam folder "css", ya nulisnya jadi href="css/style.css". Cek lagi nama filenya, sensitif huruf besar kecil lho di beberapa server!

Kesalahan yang sering terjadi:

Lupa nambahin tag sama sekali.
Salah nulis href-nya (typo nama file, salah path folder).
Naro tag bukan di dalam . Sebaiknya memang di supaya CSS diload duluan sebelum konten, jadi tampilannya nggak 'lompat-lompat'.

Coba deh cek lagi, udah ada tag ini di file HTML-mu? Path-nya udah pas?

2. Salah Nulis Selector CSS

Selector itu kayak 'alamat' atau 'target' di HTML yang mau kamu kasih gaya. Misalnya, kamu mau ngasih warna merah buat semua paragraf, kamu pakai selector p. Kalau mau ngasih gaya buat elemen dengan ID header, kamu pakai selector #header. Kalau buat elemen dengan class tombol-biru, kamu pakai selector .tombol-biru.

Kesalahan selector ini macam-macam:

Typo: Nulis clas padahal seharusnya class. Atau di HTML nulis ID-nya profil, di CSS nulisnya #profile. Beda satu huruf aja udah bikin nggak nempel.
Salah prefix: Pakai # padahal seharusnya . (misalnya, nulis #tombol padahal di HTML itu class="tombol"). Atau sebaliknya.
Selector terlalu spesifik atau kurang spesifik: Misalnya, kamu mau ngasih gaya ke
- dengan class
- menu
- . Selector yang bener mungkin
- .menu li
- . Kalau kamu cuma nulis
- li
- , bisa jadi gaya itu kena ke semua
- di halamanmu, bukan cuma yang di menu.

Type Selectors (tipe elemen): p, h1, div, li, dll. Paling lemah.
Class Selectors, Attribute Selectors, Pseudo-classes: .nama-class, [type="text"], :hover, :focus, dll. Lebih kuat dari tipe elemen.
ID Selectors: #nama-id. Jauh lebih kuat dari class atau tipe elemen.
Inline Styles: Style yang ditulis langsung di tag HTML pakai atribut style="". Paling kuat di antara yang biasa dipakai.
!important: Ini super kuat dan bisa menimpa semuanya, termasuk inline style. Tapi pemakaiannya sangat tidak disarankan karena bisa bikin CSS jadi susah di-maintain dan dibaca. Hindari !important kalau bisa.

DevTools Console: Browser kadang ngasih tahu kalau ada error parsing CSS di bagian Console DevTools. Cek tab Console.
Validator CSS Online: Ada banyak tool gratis di internet buat validasi kode CSS-mu, misalnya W3C CSS Validator. Copy-paste kode CSS-mu ke sana, nanti dia bakal ngasih tahu baris mana yang error.
Text Editor dengan Syntax Highlighting: Editor kode modern (VS Code, Sublime Text, Atom, dll.) punya fitur syntax highlighting yang bisa ngasih warna beda buat property, value, selector. Kalau ada bagian yang warnanya aneh atau nggak sesuai, bisa jadi di situ letak kesalahannya. Beberapa editor juga punya fitur linter yang langsung ngasih tanda kalau ada syntax error.

Hard Refresh: Coba refresh paksa halamanmu. Di Windows/Linux, biasanya pakai Ctrl + Shift + R atau Ctrl + F5. Di Mac, pakai Cmd + Shift + R. Ini biasanya ngasih tahu browser buat nge-download ulang semua file.
Clear Browser Cache: Kalau hard refresh nggak mempan, coba hapus cache browser secara manual. Cari opsi "Clear browsing data" atau "Hapus data penjelajahan" di pengaturan browser-mu. Centang bagian cache (dan cookies kalau perlu, tapi hati-hati nanti kamu logout dari website lain).
Disable Cache di DevTools: Saat development, kamu bisa buka DevTools (F12), masuk ke tab "Network", lalu centang opsi "Disable cache". Saat DevTools terbuka, cache browser akan dimatikan untuk tab itu. Sangat berguna saat ngoprek CSS/JS.
Versioning File CSS: Cara yang lebih permanen buat ngatasi cache di produksi (kalau website-nya udah online dan diakses banyak orang) adalah dengan menambahkan 'versi' di nama file CSS atau di link-nya. Contoh: . Tiap kali kamu update CSS, ubah angka versinya (misalnya jadi ?v=1.2). Browser akan menganggap itu file baru dan nge-download ulang.

Can I Use? Website caniuse.com adalah sumber terbaik untuk mengecek dukungan browser terhadap properti CSS, HTML, atau JavaScript tertentu. Tinggal ketik nama propertinya, nanti muncul tabel dukungan di berbagai browser dan versinya.
Prefiks Vendor: Dulu, properti eksperimental seringkali butuh prefiks vendor (-webkit- untuk Chrome/Safari, -moz- untuk Firefox, -o- untuk Opera, -ms- untuk Internet Explorer). Meskipun sekarang udah jarang dipakai untuk properti yang umum, beberapa properti baru mungkin masih butuh. Misalnya, transition, transform, flexbox (di awal-awal kemunculannya).

DevTools Warnings: Kadang DevTools akan ngasih peringatan kalau ada properti yang tidak dikenali atau tidak valid.

Salah path relatif: Misalnya file CSS ada di css/style.css, file gambar ada di images/background.jpg. Untuk ngakses background.jpg dari style.css, kamu harus keluar satu level dari folder css (pakai ../), lalu masuk ke folder images. Jadinya url('../images/background.jpg'). Kalau kamu cuma nulis url('images/background.jpg'), browser akan nyari di css/images/ yang jelas salah.
Typo nama file atau folder.
Case Sensitivity: Di sistem operasi seperti Windows, nama file tidak sensitif huruf besar/kecil. Tapi di server web (kebanyakan Linux), nama file itu sensitif. Gambar.JPG beda sama gambar.jpg. Biasakan pakai huruf kecil semua untuk nama file dan folder di web biar aman.

DevTools Network Tab: Buka DevTools, ke tab "Network". Refresh halaman. Kamu bisa lihat request apa aja yang dilakukan browser untuk ngeload file-file (HTML, CSS, JS, gambar, font). Kalau ada gambar atau font yang nggak berhasil diload, statusnya biasanya error (404 Not Found). Klik request yang error itu, lihat URL-nya, apakah path-nya sudah benar?
Cek Langsung di Browser: Coba akses langsung path gambar/font itu di address bar browser. Misalnya, kalau path-nya http://localhost/css/../images/background.jpg, browser akan resolve jadi http://localhost/images/background.jpg. Kalau langsung dibuka di browser muncul gambar/font-nya, berarti path-nya bener. Kalau 404, ya salah path-nya.

DevTools: Ini lagi-lagi DevTools penyelamat. Inspect elemennya. Di tab Styles, lihat apakah ada style yang muncul dari 'element.style' (itu artinya inline style yang kemungkinan ditambahkan oleh JS). Atau lihat apakah class elemennya berubah saat ada interaksi (misalnya klik tombol). Kalau classnya berubah, cek di CSS-mu, ada aturan CSS buat class yang ditambahkan JS itu?
Console: Cek tab Console DevTools. Kalau ada error di kode JavaScript, bisa jadi itu yang bikin style-nya nggak jalan sesuai harapan (misalnya JS yang seharusnya nambahin class buat animasi malah error).
Source Code: Baca kode JavaScript yang terkait sama elemen itu. Cari apakah ada manipulasi DOM (Document Object Model) atau style di sana.

Salah sintaks: Lupa @media, salah nulis kondisi (max-width jadi maximum-width), kurung kurawal buka/tutup yang salah.
Nilai breakpoint yang salah: Angka max-width atau min-width yang nggak sesuai sama desain atau ekspektasi.
Nggak ada viewport meta tag di HTML: Supaya media queries bekerja dengan bener di perangkat mobile, kamu wajib nambahin tag ini di HTML: . Tanpa ini, browser mobile kadang salah ngitung lebar layarnya.
Order Media Queries: Kalau kamu punya media query untuk layar kecil (misal max-width: 768px) dan layar sedang (min-width: 769px dan max-width: 1024px), perhatikan urutannya di file CSS. Aturan yang ditulis belakangan akan menimpa aturan yang ditulis duluan kalau specificity-nya sama. Biasanya, lebih mudah kalau style default itu untuk mobile (mobile first), lalu media query untuk layar yang lebih besar (min-width). Atau sebaliknya (desktop first), style default untuk desktop, lalu media query untuk layar yang lebih kecil (max-width). Pilih salah satu pendekatan dan konsisten.

Resize Jendela Browser: Cara paling gampang buat ngecek media queries ya coba ubah ukuran jendela browser-mu. Apakah style-nya berubah sesuai breakpoint yang kamu tentukan?
DevTools Responsive Mode: DevTools punya fitur simulasi perangkat (device toolbar). Klik ikon mobile/tablet di DevTools, kamu bisa milih simulasi ukuran layar atau bahkan jenis perangkat. Ini sangat membantu buat ngecek responsivitas.
Cek Viewport Meta Tag: Pastikan tag sudah ada di HTML-mu.

Akses Langsung URL File CSS: Coba buka file CSS-mu langsung di browser pakai URL lengkapnya. Misalnya http://namadomainmu.com/css/style.css. Kalau muncul kode CSS-mu di browser, berarti file-nya ada dan bisa diakses. Kalau muncul error 404 Not Found, berarti file-nya nggak ada di lokasi itu di server.
Cek Lewat FTP/File Manager Hosting: Login ke server hosting-mu pakai FTP client (FileZilla, WinSCP, dll.) atau pakai file manager yang disediakan panel hosting (cPanel, Plesk, dll.). Pastikan file CSS-mu beneran ada di folder yang sesuai dengan path di tag HTML-mu.

DevTools Console: Buka tab Console di DevTools. Cek apakah ada error berwarna merah yang muncul saat halaman diload. Perbaiki error JavaScript tersebut.

Element mana yang kamu pilih.
CSS apa aja yang nempel di elemen itu.
Dari file CSS mana aturan itu berasal (beserta barisnya!).
Aturan mana yang ditimpa oleh aturan lain (dicoret).
Specificity dari setiap aturan.
Model box elemen (margin, border, padding, content).
Request file apa aja yang diload dan statusnya (berhasil/gagal).
Error JavaScript atau CSS yang terjadi.

di dalamSpasi yang salah: Misalnya, div.kotak beda sama div .kotak. div.kotak artinya elemen div yang sekaligus punya class kotak. Sedangkan div .kotak artinya elemen apapun dengan class kotak yang berada di dalam* elemen div. Perhatikan spasi ini penting banget!Gimana cara ceknya? Pakai Developer Tools (DevTools) di browser. Klik kanan di elemen yang mau kamu cek, pilih "Inspect" (atau "Periksa"). Di panel DevTools, kamu bisa lihat elemen HTML-nya dan di sebelah kanannya ada tab "Styles" atau "Gaya" yang nunjukkin CSS apa aja yang lagi nempel di elemen itu. Kalau style yang kamu tulis nggak muncul di sana, kemungkinan besar selectornya salah atau ada aturan lain yang menimpanya (ini dibahas di poin berikutnya).3. Masalah Specificity (Spesifisitas) CSSIni konsep yang lumayan penting dan sering bikin pusing pemula. Specificity itu kayak 'kekuatan' suatu aturan CSS. Kalau ada dua aturan CSS yang bentrok (misalnya, dua-duanya ngatur warna teks untuk elemen yang sama), browser bakal milih aturan mana yang paling spesifik. Aturan yang lebih spesifik yang bakal 'menang' dan diterapkan.Urutan kekuatan specificity (dari paling lemah ke paling kuat):Gimana specificity bekerja? Browser ngasih 'nilai' ke setiap selector. ID dapat nilai tinggi, class dapat nilai sedang, tipe elemen dapat nilai rendah. Kalau ada dua aturan buat elemen yang sama:

css
/ Aturan 1 /
.container p {
    color: blue; / specificity gabungan class (.container) + type (p) /
}

Di sini, teks paragraf di dalam elemen dengan class container akan berwarna biru karena aturan 1 lebih spesifik (menggabungkan class dan tipe) dibandingkan aturan 2 yang cuma tipe.Contoh lain:

css
#header {
    background-color: blue; / specificity ID /
}

Kalau ada elemen, background-nya akan biru karena ID lebih spesifik dari Class.Kalau specificity-nya sama kuat? Aturan yang ditulis terakhir (di file CSS atau di file HTML kalau pakai banyak file CSS) yang akan dipakai.Cara ngecek ini juga pakai DevTools. Klik kanan elemennya, inspect. Di tab Styles, kamu bisa lihat aturan-aturan CSS yang 적용 (diterapkan) dan yang dicoret (ditimpa). DevTools biasanya nunjukkin dari mana aturan itu berasal (nama file CSS dan barisnya) dan kamu bisa lihat aturan mana yang 'menang'. Kalau style-mu dicoret, itu artinya ada aturan lain yang specificity-nya lebih kuat atau posisinya lebih bawah di file CSS/link HTML.4. Ada Syntax Error di Kode CSS-muSatu titik koma yang ketinggalan, salah kurung kurawal, typo nama property atau value, itu semua bisa bikin aturan CSS nggak jalan. Browser itu agak cerewet soal sintaks. Kalau ada salah ketik di satu baris, kadang baris itu atau bahkan beberapa baris setelahnya jadi nggak kebaca.Contoh kesalahan:

css
.kotak {
    width: 100px;
    height: 100px / lupa titik koma /
    background-color red; / lupa titik dua /
}

Gimana cara deteksinya?Biasanya, error sintaks di satu blok aturan cuma bikin blok itu yang nggak jalan. Tapi kadang bisa 'merembet'. Jadi, pastikan kode CSS-mu bersih dari error sintaks.5. Masalah Cache BrowserBrowser suka nyimpen (cache) file-file statis kayak CSS, JavaScript, dan gambar biar waktu kamu buka website yang sama lagi, loadingnya lebih cepet. Nah, kadang browser masih pakai file CSS versi lama yang kesimpen di cache-nya, meskipun kamu udah update file CSS yang ada di server.Jadi, kamu udah benerin CSS-nya, udah di-save, udah di-upload, tapi pas dilihat di browser kok nggak berubah? Mungkin browser-mu masih nampilin versi lama dari cache.Cara mengatasinya:6. Override oleh Inline Styles atau !importantSeperti yang udah disinggung sedikit di bagian Specificity, inline styles () dan aturan dengan !important itu punya kekuatan super dalam menimpa aturan lain.Kalau elemenmu punya inline style, aturan dari file CSS-mu (meskipun selectornya spesifik) kemungkinan besar nggak akan berlaku untuk properti yang sama.

html
Paragraf ini warnanya hijau.

css
p {
    color: blue; / Aturan ini TIDAK akan jalan /
}

Begitu juga dengan !important:

css
.tombol {
    background-color: blue !important;
}

Meskipun !important kelihatan praktis, penggunaannya sangat nggak direkomendasikan karena bisa bikin hierarki CSS jadi kacau dan susah di-debug. Kalau kamu nemu style yang nggak mau berubah, cek di DevTools apakah ada inline style atau !important yang menimpa aturanmu. Cari sumbernya dan coba atasi masalah specificity dengan cara yang lebih 'elegan' tanpa !important.7. Property CSS Belum Didukung Browser (Compatibility)Tidak semua properti CSS didukung oleh semua versi browser. Meskipun standar CSS terus berkembang, butuh waktu sampai semua browser mengimplementasikannya dengan sempurna. Misalnya, ada properti CSS3 atau CSS4 yang masih baru, bisa jadi browser versi lama belum kenal.Cara ngeceknya:

css
.box {
    -webkit-transition: all 0.5s ease; / Chrome, Safari, older versions /
    -moz-transition: all 0.5s ease;    / Firefox /
    -o-transition: all 0.5s ease;      / Opera /
    transition: all 0.5s ease;         / Standard /
}

Kalau kamu pakai properti yang agak baru, coba cek caniuse.com. Mungkin kamu perlu menambahkan prefiks vendor atau mencari alternatif properti yang lebih widely supported.8. Path Gambar atau Font di CSS SalahKalau kamu pakai properti CSS seperti background-image atau @font-face, kamu perlu ngasih tahu browser di mana letak file gambar atau font-nya. Sama kayak link file CSS ke HTML, path di sini juga harus akurat.Contoh di CSS:

css
.banner {
    background-image: url('../images/background.jpg'); / Path relatif /
}

Kesalahan yang sering terjadi:Cara ngeceknya:9. Kode CSS Ditimpa oleh Kode JavaScriptKadang, bukan CSS lain yang menimpa style-mu, tapi JavaScript. JavaScript bisa memanipulasi style suatu elemen secara langsung, misalnya dengan menambah/menghapus class, atau bahkan mengubah inline style elemen.

javascript
// Contoh JavaScript yang mengubah style
let element = document.getElementById('myElement');
element.style.color = 'purple'; // Mengubah inline style

Kalau ada kode JS yang ngubah style atau class suatu elemen, perubahan itu bisa menimpa aturan CSS yang kamu tulis di file CSS.Gimana cara ngeceknya?Kalau ternyata masalahnya dari JavaScript, kamu perlu debug kode JS-nya atau menyesuaikan aturan CSS-mu supaya sinkron dengan apa yang dilakukan JS.10. Menggunakan Media Queries yang SalahMedia queries dipakai buat ngasih style beda tergantung ukuran layar (atau jenis media lain). Ini penting banget buat bikin website responsif (tampil bagus di berbagai ukuran layar). Tapi kalau nulis media queries-nya salah, style di dalamnya nggak akan kepanggil.Contoh media query:

css
/ Style default untuk layar besar /
.container {
    width: 960px;
    margin: 0 auto;
}

Kesalahan yang sering terjadi:Cara ngeceknya:11. File CSS Belum Terupload atau Lokasinya Salah di ServerKadang masalahnya bukan di kode atau browser, tapi di proses upload. Kamu udah benerin file CSS di komputer lokal, tapi lupa di-upload ke server hosting. Atau di-upload, tapi ke folder yang salah.Cara ngeceknya:12. Ada Error JavaScript yang Memblokir Rendering CSSMeskipun jarang, terkadang error fatal di kode JavaScript (terutama yang di-load sebelum CSS atau yang memanipulasi elemen krusial) bisa mengganggu proses rendering halaman, termasuk penerapan CSS. Browser mungkin berhenti mengeksekusi skrip dan rendering saat menemukan error JS yang parah.Cara ngeceknya:Kesimpulan: Senjata Utama adalah Developer Tools!Dari semua poin di atas, satu hal yang paling krusial dan berulang adalah penggunaan Developer Tools (DevTools) di browser. Chrome, Firefox, Edge, Safari, semuanya punya DevTools yang canggih. Belajar menggunakan fitur "Inspect Element", tab "Styles", tab "Computed", tab "Network", dan tab "Console" adalah skill wajib buat siapapun yang ngoprek web, khususnya CSS.DevTools itu mata dan telinga kamu buat ngelihat apa yang sebenernya terjadi di browser. Dia bisa ngasih tahu:Jadi, langkah pertama saat CSS-mu nggak jalan adalah: buka DevTools, inspect elemen yang bermasalah, dan lihat di tab Styles/Computed, aturan CSS-mu muncul nggak? Kalau muncul tapi dicoret, lihat aturan mana yang menimpa (specificity atau order). Kalau nggak muncul sama sekali, cek selectornya, link filenya, atau syntax error.Jangan panik. Debugging itu proses yang normal dalam pengembangan web. Dengan memahami alasan-alasan umum di atas dan memanfaatkan DevTools, kamu bakal bisa lebih cepat menemukan solusi dan bikin CSS-mu jalan sesuai harapan. Semangat ngoprek kodenya!

Kenapa CSS-mu Nggak Jalan-jalan Ini Alasannya

Read next

Ngulik CSS Biar Tampilan Websitemu Beda Dari yang Lain

Sentuhan CSS yang Mengubah Tampilan Biasa Jadi Luar Biasa

Langsung Praktik! Cara Pakai Framework CSS Buat Web Profile Kekinian