Video:CSS Defintion of !important

Transcript:CSS Defintion of !important

Hi, this is Dimitri LaBarge for About.com, and today we're going to talk about the important command in CSS.

!important is a Way to Promote a Style First

What is the exclamation sign important command in CSS, or cascading style sheets? Basically, it’s a way of placing emphasis on a certain style, so one particular style is promoted first.

Let’s explain that. When a browser is reading a style sheet, it goes top down and executes styles in that order. But sometimes, you want to signal to the browser that a style, maybe it’s further down the style sheet - it’s important that it be rendered first.

Why Do You Use !important in CSS?

Why would you want to do that? CSS style sheets can be very complicated. There can be different levels of style sheets--maybe there’s a master style sheet, and you need your own style changes to be prioritized. That’s when you would use !important.

Example of !important in CSS

Let’s say that you want to apply a color to paragraphs in your HTML page. It would look something like this: p { color: #ff0000; } But later on, there’s a contradictory color command. This one sets paragraph text to black. That means the first command would get overridden: p { color: #000000; } So, let’s tell the browser to override that second color style, which we assume is the style sheet of the original web page author.

You would add !important, just like this. p { color: #ff0000 !important; } Now the text will appear red. Note that it needs to be placed at the end of the line, or it won’t have any effect.

Using !important Does Not Replace Good Code

You should also realize that !important is no replacement for good coding. If you structure your style sheets correctly, the !important command is one that seldom needs to be used. However, it can be very helpful, say, if you’re doing some troubleshooting or debugging your CSS style sheet.

Thanks for watching. To learn more, visit us on the web at About.com.