CLASS overrules ELEMENT : Style overwrite « Style Basics « HTML / CSS

CLASS overrules ELEMENT

 


<!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;
    }
    
  </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>
  
</body>
</html>

Related examples in the same category

1.	Style cascade
2.	Style cascade 1
3.	class style overwrites the wildcard style
4.	Id style overwrites the tag name style
5.	ID overrules CLASS
6.	inline styles overrule everything except !important
7.	!important overrides all, including inline styles