CSS : Apa itu !important?

sederhananya fungsi dari !important ini ialah menjalankan value yang ditambahkan !important ini berlaku jika ada selector atau tag yang sama

Now that it's all over, what did you really do yesterday that's worth mentioning? Coleman Cox

sederhananya fungsi dari !important ini ialah menjalankan value yang ditambahkan !important ini berlaku jika ada selector atau tag yang sama

Last Modif at July 9th, 2011

pernah melihat source css sperti ini?

.class{
background:white!important;
}
#id{
border:none!important;
}
tag{
display:block!important;
}

jika pernah, apakah sobat mengerti maksudnya?
ok, kalo sudah paham silakan tekan tombol [X], buat yang ingin belajar dan ingin tahu, mari kita sharing :)

!important adalah bagian dari css, dan dalam bahasa indonesia berarti ‘penting!’, trus fungsinya apa?

fungsi !important

sederhananya fungsi dari important ini ialah menjalankan value yang ditambahkan !important; ini berlaku jika ada selector atau tag yang sama, bingung? hahaha saya juga bingung gimana cara sharingnya, oklah gini aja.

Anggap home dan single website sobat memiliki tampilan yang berbeda, trus anggap lagi kita membuat 3 external file css
misal nama file-nya adalah

  • general.css/* misal direquest di semua halaman */
  • home.css /* misal hanya direquest pada homepage*/
  • single.css /* misal hanya direquest pada single page*/

nah, pada general.css
kita menulis style misal seperti ini

h1, h2, h3, h4, h5, h6{
color:#333;
margin:0;
padding:0;/* maksudnya ialah tag h1, h2, h3, h4, h5, h6, memiliki jarak 0 alias tanpa batas dan warnanya adalah #333*/
}

karena general.css ini dijalankan di semua halaman/* termaksud home dan single */ maka tampilan tag h1, h2, h3, h4, h5 dan h6 sesuai dengan ini

{
color:#333;
margin:0;
padding:0;
}

disinilah gunanya important!
misal, tampilan h1, h2, h3, h4, h5 dan h6 pada single page ingin dirubah, Tulis/tambahkan saja di single.css seperti ini

h1, h2, h3, h4, h5, h6{
color:#888!important;
margin:10px 0 10px 5px!important;
}

jadi maksudnya ialah tag h1, h2, h3, h4, h5, h6 di singlepage akan memiliki style seperti ini

{
color:#888!important;
margin:10px 0 10px 5px!important;
}

maksudnya apa sih?

coba perhatikan general.css dan single.css
pasti sama-sama ada ini kan?

h1, h2, h3, h4, h5, h6{}

karena general.css direquest di setiap halaman jadinya tampilan tag h1, h2, h3, h4, h5, h6 pada singlepage-pun akan sama, jadi, kita menambahkan !important di single.css agar tampilan single-nya berbed’da.

sintaks !important

sintaks adalah aturan, jika kita ingin menggunakan !mportant, peletakanya harus setelah value

.misal{
color:red/*disini*/;
}/*jadinya seperti ini*/

.misal{
color:red!important;
}

!important untuk debugger pada IE

Umumnya engine layouts IE*khususnya IE6* ini memiliki beberapa bug untuk membaca css. Terkadang setelah membuat maupun ngedit theme, tampilan website/blog kita di IE lumayan berantakan.
misal sidebar terlalu kelebaran, hingga turun kebawah. untuk menyesuaikanya buat saja style untuk IE misal seperti ini

<!--[if IE]>
<style type="text/css">
#misal_sidebar_kanan{
width:300px!important!;/* jadi jika/khusus ie, misal_sidebar_kanan akan memiliki lebar 300px */
}
</style>
<![endif]-->

sekian tulisan rancu ini, jika ada yang ingin ditanyakan silakan tingalkan di kolom komentar.

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

17 thoughts on “CSS : Apa itu !important?”

  1. bro eser says:

    Masih bingung bro,,,, maklum masih newbie

  2. iskandaria says:

    Jujur, saya baru mengerti fungsi impotant setelah membaca postingan ini mas. Sebelumnya saya kira hanya untuk hacking CSS di IE 6 :)

  3. masih nubita, garuk garuk kepala, biasanya tinggal pakai themnya saja… kalau error di IE ya ganti yang lain saja… :)

  4. Indam says:

    Bro Eser,
    Kalo mau belajar, nanti juga paham sendiri ::)

    Iskandaria,
    Saya tidak yakin

    Suke,
    :)

  5. arisriyadi says:

    salam kenal dari aq

  6. Sabia says:

    Ini sangat membantu dalam menambah pengetahuan mengenai css .

    Makasih oom.. :-* :D

  7. faceleakz says:

    saya sama sekali tidak mengerti tapi sepertinya tulisan !important ada ditemplate blog saya.

  8. wah kalo ini mah master disainer bukan pemula lagi, mantap bung!

  9. saya sebenarnya senenk banget sama coding (apapun) tapi saya bener2 gag paham sama sekali masbro… :)

  10. Alex says:

    Selamat malam Mas,

    Mau nanya, Bagaimana cara mengedit halaman posting (index.ph) karena lebar artikel tidak sesuai (lebih pendek) dari lebar halaman posting defaulthnya.
    Mohon pencerahannya.
    Trim’s atas bantuannya Bro’

    1. indam says:

      Maaf baru balas, rekomendasi belajar CSS dulu. NAnti pasti tahu sendiri…

  11. Suwardi says:

    Terima kasih mas indaam sangat membantu buat saya yang masih newbie ini untuk memahami fungsi-fungsi tersebut dan masih perlu banyak belajar lagi CSS

  12. NativeHacker says:

    ijin jadi referensi artikel di NativeHacker

  13. dika says:

    thanks gan, ilmunya sangat berguna,. :D

  14. Bintulhuda says:

    thanks gan ilmunya berguna :D

  15. Gameprix says:

    owh,. ya mas makasih..

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-