The Cascade

Most properties are inherited. For example in

<head>
    <style type="text/css">
      h1 {color:gray;}
    </style></head>
<body>
    <h1>Its a wonderfull day for <em>science!</em></h1>
</body>

the word "science" would be in gray.

Some properties, such as border, do not inherit.

More specific selectors dominate. id dominatesclass which dominates all others. So in

<head>
    <style type="text/css">
      .blue {color:blue;}
      h1 {color:red;}
    </style></head>
<body>
    <h1 class="blue">This is blue</h1></body>

A property that is inherited is less specific than one that is not.

The property value that applies to a tag is

The one in the most specific declaration.

If there are more than one, then use the one defined later in the file:

  <head>
    <style type="text/css">
      .green {color: green}
      a {color: yellow;}
      h1 {color: red;}
      h1 {color: blue;}
    </style>
  </head>
  <body>
    <h1>This is blue <a href="/">this is yellow</a></h1>
    <h1 class="green">This is green</h1>
  </body>