How to Build an External Style Sheet

Using CSS Site Wide

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Build an External Style Sheet." ThoughtCo, Aug. 8, 2017, thoughtco.com/how-to-build-external-style-sheet-3466835. Kyrnin, Jennifer. (2017, August 8). How to Build an External Style Sheet. Retrieved from https://www.thoughtco.com/how-to-build-external-style-sheet-3466835 Kyrnin, Jennifer. "How to Build an External Style Sheet." ThoughtCo. https://www.thoughtco.com/how-to-build-external-style-sheet-3466835 (accessed September 19, 2017).
Web designer working in her studio
Web designer working in her studio. Nicola Tree/Getty Images

Websites are a combination of style and structure, and on today's web, it is a best practice to keep these two aspects of a site separate from each other.

HTML has always been what provides a site with its structure. In the early days of the Web, HTML also contained style information. Elements like the <font> tag were littered across the HTML code, adding look and feel information alongside with structural information.

The web standards movement pushed us to change this practice and to instead push all style information into CSS or Cascading Style Sheets. Taking this a step further, current recommendations are that you use what is known as an "external style sheet" for your website styling needs.

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 entire 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 style. You can also make it easier to make changes for the future. Since every pages use the same external style sheet, any change to that sheet will impact every site page. This is much better than having to change every page individually!

Advantages of External Style Sheets

  • 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 web site. Many style rules can be difficult to remember, and while you might have a printed style guide, it is inefficient and tedious to be continuously flipping through it to determine if example text is to be written in 12 points Arial font, or 14 point courier. By having everything in one place, and since that place is also where you would make changes, you can make maintenance so much easier.
  • You can create classes of styles that can then be used on many different HTML elements.
    If you often use a certain font styling to give emphasis to various things on your page, you can use a class attribute that you set up in your style sheet to get this look and feel, 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.

Disadvantages of External Style Sheets

  • External style sheets can increase the download time, especially if they are extremely large. Since the CSS file is a separate document that must be loaded, it will impact performance to perform that download.
  • External style sheets get big very quickly as it's hard to tell when a style is no longer in use because it's not deleted when the page is removed. Proper management of your CSS files is important, especially if multiple people are working on the same file.
  • If you only have a single-page website, having an external file for CSS may not be necessary since you only have that one page to style. Many of the benefits of external CSS are lost when you only have a single page site.

How to Create an External Style Sheet

External style sheets are created with a similar syntax to document level style sheets. However, all you need to include are the selector and the declaration. Just like in a document-level style sheet, the syntax for a rule is:

selector {property : value;}

Save these rules into a text file with the extension .css. This isn't required, but it is a good habit to get into, so you can immediately recognize your style sheets in a directory listing.

Once you have a style sheet document, you need to link it to your Web pages. This can be done in two ways:

  1. Linking
    In order to link a style sheet, you use the HTML tag. This has the attributes rel, type, and href. The rel attribute tells what you are linking (in this case a stylesheet), the type defines the MIME-Type for the browser, and the href is the path to the .css file. 
     
  2. Importing
    You would use an imported style sheet within a document level style sheet so that you can import the attributes of an external style sheet while not losing any document specific ones. You call it in a similar way to calling a linked style sheet, only it must be called within a document level style declaration. You can import as many external style sheets as you need to maintain your Web site.

    Original article by Jennifer Krynin. Edited by Jeremy Girard on 8/8/17