Cara menggunakan kenapa css tidak terbaca

omahkoding.com – Hallo guys ketemu lagi dengan saya di omahkoding : tempat belajar koding di kota semarang dan sekitarnya. Pada kesempatan kali ini kita akan membahas tentang masalah css tidak terbaca di framework laravel.

CSS Tidak Terbaca di Framework Laravel

Jika file css di projek laravel kalian tidak terbaca sebaiknya ikuti langkah langkah berikut ini dengan baik dan benar.

Jika anda memiliki masalah dengan css/media yg tidak terload pada hosting python django, maka kalian harus membuat symlink agar css/media dapat terload dengan benar.

Contoh kasus sederhana

main domain : mydjangoapp.com
cPanel username : mydjango
Python App Folder : /home/mydjango/myapp
Python App URI : http://mydjangoapp.com/
Static url : http://mydjangoapp.com/static/css/filename.css

django@hostname:~# ln -sf /home/mydjango/myapp/path/to/static /home/mydjango/public_html/static

Note:

Replace mydjango/myapp/path/to/static dengan direktori css/media yg benar milik kamu.
gunakan "pwd" untuk cek posisi direktory saat ini menggunakan terminal.

Sudah dua hari ini saya dibuat bingung dengan file yang saya buat. Saat ini saya sedang belajar membuat tampilan webpage untuk mempraktekan ilmu CSS yang saya baru dapat. Saya buat file HTML dan saya buat file CSS nya. Awalnya semua baik-baik saja dan display berubah sesuai dengan keinginan saya. Tapi setelah memasukan beberapa perubahan di elemen lainnya, dekorasi CSS saya sebelumnya hilang padahal file CSS tidak saya edit. CSS tidak berfungsi!!!

Saya dibuat pusing dengan apa yang saya temui ini. Saya coba searching di google tapi nihil. Tidak ada jawaban untuk CSS Tidak Berfungsi. Tidak ada jawaban yang memuaskan rasa penasaran saya kenapa CSS tidak berfungsi. Padahal saya tidak merubah/edit file CSS itu.

lihat gambar dibawah ini:

Saya menggungana Subleme Tet Editor (download), karena menurut saya text editor ini sangat simple dan mudah dimengerti. Apalagi newbie seperti saya. Tapi nyatanya? tetap saja saya pusing saat menemukan masalah ini.

Oke, kembali ke gambar. Lihar selectornya. Kenapa selector p pada file CSS ini berwarna putih sedangkan selector yang lain berwarna? putih menandakan file itu tidak sesuai dan tidak bisa diterapkan. Padahal sebelumnya, dia berwarna merah.

Lalu saya coba melakukan beberapa eksperiment. Saya ketik ulang file CSS ini agar CSS tidak berfungsi ini bisa berfungsi seperti sedia kala. Benar, berhasil kembali berwarna. Lihat gambar dibawah ini:

Saya letakan selector p di tempat paling atas dan dia kembali berwarna merah. Tapi ternyata hal ini tidak berpengaruh pada tampilan webpage saya. CSS TIDAK BERFUNGSI..!!!

Masih penasaran, saya coba kesampingkan selector p dan mulai beralih kepada selector lainnya. Saya beralih ke selector Body. Saya ubah Text-Indent yang awalnya 5% menjadi 15%. Dan hasilnya, CSS TIDAK BERFUNGSI….!! Tetap tidak ada perubahan pada webpage saya. Dan satu hal kemudian melintas di pikiran saya, Subleme text sepertinya tidak menyimpan perubahan yang saya buat.

Tapi argument saya lemah. Pasalnya, setiap kali saya merubah posisi atau menuliskan file, baik CSS ataupun HTML, subleme menyimpan perubahan namun untuk masalah ini, sejauh apapun file saya edit, perubahan tetap tidak terlihat. CSS tidak berfungsi.

Saya sudah coba menggunakan notepad yang merupakan program bawaan komputer standart. Tapi hasilnya sama. CSS tidak berfungsi.

Kalian punya solusi? bantu saya. Apa yang harus saya lakukan?

— 2 jam kemudian —

Saya menemukan sedikit cahaya dalam masalah CSS tidak berfungsi. Setelah saya cari di Google search tidak ketemu, saya coba mencarinya di Youtube. Awalnya saya mencoba keyword ‘Kenapa CSS Tidak Bekerja?’ dan hasilnya? tidak ada. Hingga akhirnya saya memberanikan diri menulis keyword ‘Why My CSS Unfunctional?’. Hasilnya? Saya menemukan video ini.

(Maaf, saya belum upgrade WordPress saya jadi tidak bisa menampilkan videonya. Tapi kalian bisa cek via Youtube disini).

Tapi walaupun begitu, saya mendapatkan text dari video tersebut, begini bunyinya:

‘- Why is my CSS file not working?

+ If you are working on something like a WordPress theme in CSS, you have to log in to the admin panel, upload the wp-content/themes folder and activate the theme.

‘- I’m not in WordPress. I wonder if the CSS file is right.

+ It is easy to worry about whether the CSS file is written correctly, since they are often created by artists on computers instead of programmers. You could run the CSS file or HTML page against a validator to check it.

‘- I’ve heard of code validation. I’ve never heard of CSS validation.

+ There is a CSS validator by the Web Design Group called CSScheck.

‘- What else could it be?

+ A common cause of CSS file problems is putting too many spaces between the unit and the values for the unit. Values and units should not have a space between them, and having a space there makes the rule invalid.

‘- I wonder if the HTML page and CSS file are incompatible.

+ If there is too much HTML in the style sheet, that can mess it up.

‘- I’ve heard there should not be any HTML in the style sheet.

+ There certainly should not be anything like style tags or font tags; that will mess up a style sheet. So can having embedded images and text in a web page that interferes with the style sheet’s designs.

‘- I don’t think that’s the cause.

+ You could have made a mistake as simple as failing to put the CSS file in the same directory as the HTML file.

‘- I know that theme.css needs to be in the html file’s directory. Otherwise I’d get file not found errors.

+ The reference to its location might be wrong. Did you self close your link tag?

‘- You said not to put HTML in the CSS file.

+ This is the link reference to the CSS theme file.

‘- Maybe.

+ Just make sure you clean up the code by closing all the brackets and making sure you didn’t miss a semicolon.

Dari naskah diatas, kita bisa ambil beberapa hal yang mengakibatkan sebuah file CSS tidak berfungsi:

Pertama, Apakah kita sudah menulisnya dengan benar? ragu? kunjugi CSScheck, disini.

Kedua, Bisa jadi kita terlalu banyak menempatkan ruang <space> atau spasi antara value dan unit. Ternyata ini juga berpengaruh ya? Karena selama ini saya hanya tahu pemakaian huruf kapital tidak akan berfungsi pada CSS. Jadi, gunakan huruf kecil. Tanpa itu CSS tidak berfungsi.

ketiga, pastikan CSS di awali dengan tanda ({ ) dan di akhiri dengan ( }) atau tutup dan buka kurawal. Tanpa itu CSS tidak berfungsi.

keempat, pastikan penempatan file .CSS dan .HTML berada dalam satu folder (jika menggunakan CSS eksternal) jika tidak, cari informasi lain bagaimana cara menempatkannya. Mungkin bisa dicari di Search Engine dengan keyword ‘penempatan CSS eksternal’. Jika tidak, maaf CSS tidak berfungsi.

-Lalu apakah ini berhasil pada kasus yang saya hadapi?-

Saya akan kasih tahu jawabannya nanti. Biar saya coba dulu hehehe….

note. Jika kita tidak menemukan solusi ketika mencari dengan bahasa Indonesia. Cobalah mencari dengan bahasa Inggris. Untuk itu, penting bagi kita mempelajari sedikit bahasa Ingris agar mudah memahaminya.

Kenapa file CSS terpisah dari HTML?

Bagaimana cara memanggil file CSS di HTML *?

Apa itu kode CSS?