Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages Media Queries Print Style Sheets

Lim Yongtaek
Lim Yongtaek
3,638 Points
Posted by 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
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
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
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
Lim Yongtaek
Lim Yongtaek
3,638 Points

Thanks. Easy explanation.