UNIT 5
> MODULE 2
Lesson 1: 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:
- you will have created an external style sheet, and linked to it from within your web pages
Activities
- 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.
- 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")
- 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"
/>
- 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.
- 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
Copyright © 2005-2008 by University of Washington.
Permission is granted to use these materials in whole or in part for
educational, noncommercial purposes provided the source is acknowledged.
This product was created with support from the National
Institute on Disability and
Rehabilitation Research of the U.S. Department of Education (grant
#H133D010306), and is maintained with support from
the National Science Foundation (grant #CNS-054061S). The contents do not
necessarily represent the policies of the U.S. federal government, and you
should not assume their endorsement.
