Web Design & Development I

UNIT 5 > MODULE 2

Lesson 1: Linking to an External Style Sheet

Overview

Up to this point in this 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:

• you will have created an external style sheet, and linked to it from within your web pages

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> element is not required.
2. Save your style sheet with a filename ending in .css (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="mystyle.css" />
   
4. While adding the above tag to each of your web pages, also check any internal style definitions that you have within each web page. These style definitions will override the external style sheet definitions, so the best approach is to eliminate all internal style references, being careful to transfer any needed styles to the external style sheet.
5. Play around with your external style sheet to see how your changes affect the look of your site.

Resources/Online documents

• Web Design Group (WDG): Linking Style Sheets to HTML

All done?

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

Copyright © 2006 by University of Washington. Permission is granted to copy these materials for educational, noncommercial purposes provided the source is acknowledged. This product was funded by the National Institute on Disability and Rehabilitation Research of the U.S. Department of Education (grant #H133D010306). However, the contents do not necessarily represent the policy of the Department of Education, and you should not assume their endorsement.