The Benefits of Cascading Style Sheets

Get the facts with this CSS short course

Cascading style sheets have many benefits. They allow you to use the same style sheet across your entire website. There are two ways to do this:

  1. linking with the LINK element
    <link rel="stylesheet" href="styles.css">
  2. importing with the @import command
    <style>
      @import url('http://www.yoursite.com/styles.css');
    </style>

Advantages and Disadvantages of External Style Sheets

One of the best things about cascading style sheets is that you can use them to keep your site consistent.

The easiest way to do this is to link or import an external style sheet. If you use the same external style sheet for every page of your site, you can be sure that all the pages will have the same styles.

Some of the advantages to using external style sheets include that you can control the look and feel of several documents at once. This is especially useful if you work with a team of people to create your website. Many style rules can be difficult to remember, and while you might have a printed style guide, it is tedious to have to constantly flip through it to determine if example text is to be written in 12 point Arial font or 14 point courier.

You can create classes of styles that can then be used on many different HTML elements. If you often use a special Wingdings font to give emphasis to various things on your page, you can use the Wingdings class you set up in your style sheet to create them rather than defining a specific style for each instance of the emphasis.

You can easily group your styles to be more efficient. All the grouping methods that are available to CSS can be used in external style sheets, and this provides you with more control and flexibility on your pages.

That said, there are also very good reasons not to use external style sheets. For one, they can increase the download time if you link to a lot of them.

Every time you create a new CSS file and link or import it into your document, that requires the Web browser to make another call to the Web server to get the file. And server calls slow down page load times.

If you only have a small number of styles, they can increase the complexity of your page.
Because the styles are not visible right in the HTML, anyone looking at the page has to get another document (the CSS file) to figure out what's going on.

How to Create an External Style Sheet

External style sheets are written in the same way as embedded and inline style sheets. But all you need to write is the style selector and the declaration. You don't need a STYLE element or attribute in the document.

As with all other CSS, the syntax for a rule is:

selector { property : value; }

These rules are written to a text file with the extension .css. For example, you might name your style sheet styles.css.

Once you have a style sheet document, you need to link it to your Web pages. As I mentioned above, this is done in two ways.

Linking CSS Documents

In order to link a style sheet, you use the LINK element. This has the attributes rel and href. The rel attribute tells the browser what you are linking (in this case a style sheet) and the href attribute holds the path to the CSS file.

There is also an optional attribute type that you can use to define the MIME type of the linked document. This is not required in HTML5, but should be used in HTML 4 documents.

Here is the code you would use to link a CSS style sheet called styles.css:

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

And in an HTML 4 document you would write:

<link rel="stylesheet" href="styles.css" type="text/css">

Importing CSS Style Sheets

Imported style sheets are placed within the STYLE element. You can then use embedded styles as well if you like. You can also include imported styles inside linked style sheets. Inside the STYLE or CSS document, write:

@import url('http://www.yoursite.com/styles.css');