Inilah Kesalahan Sederhana Pemanggilan CSS Eksternal

kesalahan-sederhana-pemanggilan-css-eksternal

Hello semuanya.

Ini postingan pertama dari Muchtar Dynasty Tech. Blog yang membahas seputar dunia IT khususnya dunia Web dan semua detailnya. Kamu juga bisa menemukan tips dan informasi umum seputar dunia IT. Pada kali ini, Saya akan membahas kesalahan sederhana pemanggilan file css atau yang sering dikenal sebagai teknik css eksternal. Saat yang sama ketika Saya pun mengalami permasalahan yang serupa. Ketika memanggil file dengan perintah link pada file index html yang saya buat, ternyata eh ternyata tampilan halaman front end nya ngga mempengaruhi pada kode html nya. Style yang ada di file css terpisah tersebut tidak mengubah halaman index html nya. Membingungkan. Padahal Saya sudah menulis dengan perintah yang sesuai dengan contoh tutorial tapi hasilnya tidak sesuai dengan ekspetasi. Kebanyakan di buku tidak menekankan aturan pada pemanggilan css eksternal yang menakibatkan terjadinya kesalahan sederhana ini. Jadi benar, segala sesuatu yang kita hendak pelajari harus paham dasar atau fundamentalnya. Berikut akan Saya paparkan penyebab kesalahan ini. Silakan lanjutkan membaca.

 

Kali ini Saya akan mengambil kasus pada projek front-end saya yang sedang digarap. mumpung belum kompleks desain css nya. Mari kita perhatikan apa yang menjadi penyebab kesalahan ini layak untuk diketahui oleh Anda.

Jika ingin membuktikan secara langsung, Silakan Anda ikuti tutorial ini.

Pertama, siapkan satu file index dengan ekstensi .html dan siapkan 1 file ekstensi .css dengan nama default atau style. Terserah Anda. Simpan dalam 1 folder dan beri nama e-school atau nama lain yang Anda suka.

Kedua, mari kita isi file index dengan konten seperti dibawah ini.

kesalahan-sederhana-css-eksternal-1

Silakan Anda ketik sintaks diatas sama persis.

Ketiga, isi file css nya dengan konten seperti di bawah ini.

kesalahan-sederhana-css-eksternal-2

Lihat korelasi antara file index.html dengan file css eksternal yang tadi sudah dibuat. Fokus kita mengarah pada id nav supaya tidak berfikir terlalu luas. Di file css Saya beri perintah pada id (yang disimbolkan dengan simbol tagar) nav dengan memberi warna latar biru keunguan. Setelah Anda menulis semua konten, mari lihat hasil dengan menekan dua kali pada index.html atau klik kanan sekali pada file index.html kemudian klik kiri sekali pada menu open. Anda pasti sudah paham dengan perintah ini. 🙂

Keempat, lihat hasil output index.html di browser.

kesalahan-sederhana-css-eksternal-3

Gimana ? apakah Anda menemukan sesuatu yang salah ?

Jika Anda teliti, pasti Anda akan mengiyakan apa yang sudah Saya tanyakan tadi. Yup, perintah css nya tidak terpanggil. Padahal, tadi pada konten index.html kita sudah menyertakan baris perintah link setelah elemen title, silakan Anda cek kembali hasil ketikan Anda.

Pada saat Saya yang mengalami ini, tidak ada satupun penjelasan rinci di internet mengenai penyebab kesalahan yang Saya alami. Kebanyakan tutorial di luar sana membahas secara umum saja.

Kelima, Silakan Anda buka kembali file index.html yang sudah dibuat tadi dan tambahkan atribut rel=”stylesheet” pada baris link. Lihat screenshot dibawah.

kesalahan-sederhana-css-eksternal-4

Simpan, kemudian refresh tampilan halaman index di browser dan lihat hasilnya. Kalo di browser Saya, hasilnya seperti ini. Silakan sesuaikan dengan hasil Anda.

kesalahan-sederhana-css-eksternal-5

Gimana ? Ada yang berubah dan berbeda dengan hasil sebelumnya. Lalu, apa yang berbeda dan menjadi permasalahannya.

Mari kita simpulkan. Kesalahan yang Anda dan Saya lakukan adalah pada saat menuliskan perintah link, tidak menyertakan atribut rel=”stylesheet” ini. Di beberapa text editor, atribut ini otomatis terpanggil. Jika tidak, inilah kejadiannya. Semua perintah css yang ada di file style.css atau default.css tidak akan dieksekusi. Ini hanya contoh kecil, bagaimana klo Anda sudah menyusun perintah css seribu baris lebih dan tidak berdampak pada website yang sedang Anda bangun? Pastinya Anda akan kalang kabut mencari solusi di Internet. hehe.

Oke, itu tadi informasi sederhana pembuka untuk blog Muchtar Dynasty Tech. Jika artikel ini bermanfaat, silakan Share ke teman – teman Anda dan bila Anda ingin berdiskusi dengan Saya silakan komen dibawah. Gratis koq. 🙂