!important overrides all, including inline styles

!important overrides all, including inline styles : Style overwrite : Style Basics HTML CSS TUTORIALS


 


<!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" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title>Specificity</title>
  <style type="text/css" media="screen">
    h1 {
      color:#000;
    }
    p {
      color:#000;
    }
    
    div h1 {
      color:#333;
    }
    div p {
      color:#333;
    }
    
    div.module h1 {
      color:#666;
    }
    div.module p {
      color:#666;
    }
    .module h1 {
      color:#000;
    }
    .module p {
      color:#000;
    }
     div#content h1 {
      color:#999;
    }
     div#content p {
      color:#999;
    }
    h1 {
      color:#ccc !important;
    }
     p {
      color:#ccc !important;
    }
  </style>
  
</head>

<body>
  <h1>Page Title</h1>
  <p>This is a test. This is a test. </p>
  
  <div>
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>

  <div class="module">
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>

  <div id="content" class="module">
    <h1>Page Title</h1>
    <p>This is a test. This is a test. </p>
  </div>
  <div id="content" class="module">
    <h1 style="color:#ccc;">Page Title</h1>
    <p style="color:#ccc;">This is a test. This is a test. </p>
  </div>  
</body>
</html>

HTML code for linking to this page:

!important overrides all, including inline styles : Style overwrite : Style Basics HTML CSS TUTORIALS

HTML CSS TUTORIALS » Style Basics » Style overwrite »

!important overrides all, including inline styles

HTML CSS TUTORIALS