Important Override : important « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. important

Important Override

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>HTML/XHTML:  &raquo; Important Override</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">

p {color: red !important; font-size: 12pt;}

</style>

</head>
<body>

<div class="content">
  <p>A regular paragraph.</p>
  <p style="color: green; font-size: 24pt;">This paragraph has
  inline style for green text that is overridden.</p>
  <p style="color: green !important; font-size: 24pt;">This inline
  rule !important overrides the other rule.</p>
</div>
</body>
</html>








Related examples in the same category

1.!important rules are used to override specificity
2.!important syntax has greater precedence than the (x)HTML style attribute
3.!important rules are used to override specificity.
4.Specificity, !important
5.Specificity, !important is more important than the inline style