Fungsi !important Pada CSS

Sering kita jumpai code !important pada CSS. Lalu, apa sih fungsi dari !important itu sendiri? Sebelumnya perlu kita ketahui jika pada suatu css, baik itu class, div, ataupun tag, terdapat dua kode css (property css) yang sama, maka kode yang paling bawahlah yang yang digunakan, sedangkan yang di atas tidak digunakan.

/* Contoh terdapat dua kode yang sama pada suatu selector */
.menuatas
{
margin-top: 10px;
margin-top: 7px;
}

Dari kode di atas, maka class menuatas akan memiliki margin-top sebesar 7px.

Biasanya, penggunaan !important digunakan ketika mengatasi masalah bug CSS di browser IE. Sehingga developer sering membuat kondisi jika client menggunakan browser IE. Solusinya :

.menuatas
{
margin-top:10px !important; /* Selain IE */
margin-top:7px; /* Khusus IE */
}

Kode di atas artinya, jika client menggunakan browser selain IE, maka class menuatas memiliki margin-top 10px, dan mengabaikan kode dibawahnya. Akan tetapi, jika client menggunakan browser IE, maka class menuatas memiliki margin-top 7px. Hal ini dikarenakan browser Internet Explorer (IE) TIDAK MENGENAL !IMPORTANT.