Lesson 1: Linking to an External Style Sheet


Up to this point in the course you have learned how to add style to your web pages by inserting a style section using the <style> element. But what if you want to change the look of the entire website? If your entire website was built with style definitions inside each page, that would mean going back into each page individually and changing the style. Fortunately, CSS provides a means of using an external style sheet to control the presentation of a large set of web pages. With an external style sheet, if you want to change the font style (or any other style definition) across an entire site, you only have to change it in one place.

Learner Outcomes

At the completion of this exercise:


  1. Create an external style sheet file. This file should consist of all styles that you want to apply across your entire website. The contents of the file is the same as the contents of the <style> section you've created within your web pages. The only difference is that the opening and closing <style> element is omitted.
  2. Save your style sheet file in the style subfolder that you created in the Pre-Coding lesson. Name the file anything you like, but give it a .css extension (for example, "mystyle.css")
  3. Within the HEAD section of each of the web pages in your website, add a link to the external style sheet. Here's the tag, assuming your style sheet is named mystyle.css:

    <link type="text/css" rel="stylesheet" href="style/mystyle.css" />
  4. While adding the above tag to each of your web pages, you can probably delete the <style> section from each page, if one exists. This assumes that you want any styles that are defined in your new style sheet file to apply to each of your web pages. If you have styles that are unique to a particular page, and will be only used on that page, it's ok to continue defining that style within a <style> section on the page itself. However, even in this case it's usually best to move all styles into the external CSS file so you only have one place to go if you need to edit styles on any of your web pages.
  5. Play around with your external style sheet to see how your changes affect the look of your site.

Resources/Online documents

All done?

Show your instructor your completed website, showing how you're controlling the site's presentation with your external style sheet. Then proceed to Lesson 2