Lesson 3: Linking to an External Style Sheet

Overview

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:

Activities

  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> tags are omitted.
  2. Save your style sheet file in the styles 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 how, assuming your style sheet is named mystyle.css
    <link type="text/css" rel="stylesheet" href="styles/mystyle.css" media="screen">
  4. While adding the above tag to each of your files, you can delete the <style> section from index.html and any other page that has one. Since styles are now contained in an external css file, the <style> section is no longer needed. It's still ok to have these sections though, as you might occasionally use them to define styles that only apply to the elements on a particular page.
  5. Also, while you're updating each of the files in your portfolio, you should also seize the opportunity to copy and paste any other content that so far you've added only to the home page, but should appear on every page throughout your site. Specifically, copy and paste the following content:
    • The "skip to main content" link
    • The main heading (<h1>) - but change the text so it reflects the content of the page you're copying it to
    • The navigation menu
    • The <main id="main"> tag that marks the start of the main content
    • The closing </main> that marks the end of the main content.
    • Be very careful to paste each of these items in their appropriate places within the HTML code.
  6. Play around with your external style sheet to see how your changes affect the look of your home page. Also, use your navigation menu to check how your external style sheet affects other pages on your site in addition to your home page.

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 the next module.