HTML/CSS/Style Basics/important
!important rules are used to override specificity
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Specificity, !important</title>
<style rel="stylesheet" type="text/css">
body {
font: 14px sans-serif;
}
span#precedence {
background: lightyellow;
}
span {
background: orange !important;
}
</style>
</head>
<body>
<p>
The !important syntax causes a selector to have
<span id="precedence">
greater precedence than those without it.
</span>
</p>
</body>
</html>
!important syntax has greater precedence than the (x)HTML style attribute
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Specificity, !important</title>
<style rel="stylesheet" type="text/css">
body {
font: 14px sans-serif;
}
span#precedence {
background: lightyellow;
}
span {
background: orange !important;
}
</style>
</head>
<body>
<p>
It also
<span style="background: lightblue">
has greater precedence than the (x)HTML style attribute.
</span>
</p>
</body>
</html>