Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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.

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

``` 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.