CSS Unused CSS Stages Media Queries Print Style Sheets

Lim Yongtaek
Lim Yongtaek
3,638 Points

What is '!important'?

I don't understand what !important means in the code shown in the lecture. See the below.

    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important; /* Black prints faster */
    text-shadow: none !important;
Reuben Mansell
Reuben Mansell
5,134 Points

!important overrides any other CSS commands that may also be operating on the element. Its telling the browser that it should use that css rule over any others.

DATA DEER
DATA DEER
18,940 Points

A CSS property that is marked with "!important" simply ignores all the prioritization rules CSS is based on. All of the code you've posted will most likely execute no matter what other rules you defined for this specific selector and its specific properties. Plain-talking you can't overwrite the background,box-shadow,color and text-shadow for this specific selector anymore, as long as the !important tag is still present.

I can't recommend using the important tag because it makes your CSS unreproducible.

There is a nice explanation on stackoverlflow.com what-does-important-in-css-mean

1 Answer

Daniel Mironis
Daniel Mironis
14,023 Points

Hi Lim, You can think of '!important' as it is the highest priority to do something. For example, imagine you have a

<div></div>
``` element in your html file with class of 'divClass', and in your css file, you have assigned some styles to 

<div class="divClass"></div>``` , like so:

.divClass {
    width: 200px;
    height: 200px;
    background-color: blue !important;
    background-color: red;
}

In this case, the div will have blue background color, although as you can see, I have specified its background color as red second (If I would not specified !Important on blue, the background color of the div would be red, because it would override the first style).

Lim Yongtaek
Lim Yongtaek
3,638 Points

Thanks. Easy explanation.