External Style Sheets

Apply styles to a whole website by placing the CSS into an external stylesheet.

An external style sheet is a separate file where you can declare all the styles that you want to use on your website. You then link to the external style sheet from all your HTML pages.

This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.

Example

  1. Create the Style Sheet

    Type CSS code into a plain text file, and save with a .css extension (for example, styles.css).

    Here's an example of some CSS code.

    body {
        background-color: darkslategrey;
        color: azure;
        font-size: 1.1em;
    }
    h1 {
        color: coral;
    }
    #intro {
        font-size: 1.3em;
    }
    .colorful {
        color: orange;
    }
  2. Link to the Style Sheet from the HTML Documents

    Add the following code between the <head></head> tags of all HTML documents that you want to reference the external style sheet. This code uses the HTML <link> element to link to the external style sheet.

    <link rel="stylesheet" href="styles.css">

    So, a basic example of a web page using this style sheet might look something like this:

    <!DOCTYPE html>
    <html>
        <head>
            <title>My Example</title>
            <link rel="stylesheet" href="styles.css">
        </head>
        <body>
            <h1>External Styles</h1>
            <p id="intro">Allow you to define styles for the whole website.</p>
            <p class="colorful">This has a style applied via a class.</p>
        </body>
    </html>

So, by linking to it from all web pages, all of your HTML documents will use the styles from your external style sheet resulting in a consistent look and feel.

If you want to change anything, you only need to update the external style sheet.