learn web technologies, the easy way

Local CSS Styles

Overiding an External CSS Style Sheet

Your site uses CSS, but one or more pages needs a special style. Ideally you would have all styles in your master css sheet (or sheets), but sometimes you'll have a special need to change an already-defined style for just one or two pages.

Let's say you've defined the <H1> as being BLACK 16pt ARIAL. But now you need to show a very important error and decide this page needs to stand out. You decide you need to have the <H1> in RED. You don't want to remove the <H1> tag, because search-engines look for these. So you need to keep the tag, but change it's color, all you need to do is redefine that part of the CSS style you wish to change, in this case the color. Just create the following style definition within the <HEADER> section:

<style type="text/css">
  h1 {
    color:red;
  }
</style>

The original style defined the <H1> as being 16pt ARIAL in addition to the color. Because you've only locally changed the color, the style will take on all the characteristics that we previously defined. In other words, the <H1> will still be ARIAL 16pt, but it will be shown in red (not bad, huh?).

NOTE: Some elements, such as the <H1>,<H2>, and <H3> tags have special default spacing so that they stand out from surrounding text. Unless this spacing (made up of padding and margin properties) is redefined within your master css file or locally, it will still be in effect everytime that style is used.

This effect is part of the "C" of CSS. As you know CSS stands for Cascading Style Sheet, so it makes sense to think that the characteristics that are either default or defined by you, cascade into new definitions of a style.