External, Internal and Inline Styles

External Styles

The previous examples showed CSS styles being defined in an external file (external to the HTML file which references it), which is the most common way of implementing CSS. This allows you to keep all of the formatting information for your website in one place, so that if you want to make a change you only need to update one file.

Internal Styles

An alternative method is to define the styles internally, within the HTML file. In this case, the formatting information is included within the header section of the HTML file:

<head>
  <title>Page Title</title>
  <style type="text/css">
    h1 {
      font-family: Verdana;
      font-size: 12pt;
      font-weight: bold;
      text-align: center;
      text-decoration: underline;
    }

    p {
      font-family: Verdana;
      font-size: 10pt;
      text-align: justify;
    }
  </style>
</head>

The big disadvantage of this method is that if you want to change the formatting, you now need to change it in every individual HTML file, rather than just being able to change one external CSS file and have that change picked up automatically by all of the pages in your site.

Inline Styles

Another alternative is to embed the formatting within an HTML element:

<p style="color: blue">This paragraph has blue text.</p>

From a maintenance perspective, this is even worse. If you take this approach and want to make a change, instead of having to update each HTML file, you now need to change each individual element which has had a style applied to it.

<-- Previous Page

CSS Selectors

Next Page -->

CSS Precedence