How do I make a declaration important?
Author: Deron Eriksson
Description: This CSS example describes how to use !important to increase a declaration's precedence.
Tutorial created using: Windows XP


In CSSW, it is possible to increase the precedence of a declaration by following the declaration with "!important". In CSS2, if both author and user stylesheets contain an !important declaration, the user !important rules take precedence over author !important rules.

This can be useful when troubleshooting CSS. As an example, examine style-test-1.html, shown below. It contains two rules. The rule with the "body p" selector takes precedence over the rule with the "p" selector, since the first selector is more specific.

style-test-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
body p { color: green; }
p { color: red; }
</style>
</head>
<body>
<p>Howdy</p>
</body>
</html>

As a result, the text of the <p> element will be green.

green p element

We can bump up the precedence of the "color: red;" declaration by following "red" with "!important" (before the semicolon).

style-test-2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
body p { color: green; }
p { color: red !important; }
</style>
</head>
<body>
<p>Howdy</p>
</body>
</html>

If we do this, we can see that now the text of the <p> element is now red, since an !important declaration always overrules a declaration that is not important.

red p element

Using !important in conjunction with a declaration can be useful when troubleshooting CSS issues. However, in general it is a good practice to minimize using !important in other situations.