Assignment Module X21i

Formatting with External Stylesheets

Contents

About this Document
Audience and Objectives

Overview

In this assignment, we'll take the internal stylesheet we created in assignment X21h, and make it an external stylesheet. We will then be able to apply it to other Web files.

Getting Started

to Top

Open your x21h.htm file in an editor and save it as x21i.htm, and title the page, "Sarah Strong External Stylesheet Sampler" (changing Sarah Strong to your own name).

Step 1: Creating an External Stylesheet

to Top

We can use the internal stylesheet we created in X21h, and convert it to an external stylesheet for use with more than one file. It's simple:

  1. (Re)open your x21i.htm file in an editor.
  2. Cut the entire <style> ... </style> section.
  3. Create a new file: x21.css.
  4. Into this new file, paste the style section you just cut. (Note that css files don't have a <head> or <body>.)
  5. Put your name as a comment at the top of the file:
    /* Author: Sarah Strong */
  6. Remove the <style> and </style> tags, and save the file.
  7. In your x21i.htm file, replace the <style> ... </style> section with a <link> command:
    <link rel="stylesheet" href="x21.css" type="text/css" />
  8. Save the file.

Check to make sure all your colors, fonts, and sizes are working. Your x21h.htm and x21i.htm should look just alike. If not, troubleshoot and debug.

Validate your x21.css file using W3C's CSS validator (http://jigsaw.w3.org/css-validator/). Correct any problems if necessary, and print again.

Similarly, validate your x21i.htm file as XHTML 1.0 Transitional using W3C's Validator (http://validator.w3.org/).
Step 2: Formatting a Second File

to Top 		to Top

In this part, we'll use the Aesop's Fables text and format it using various styles.

  1. Save your XHTML template.htm file as aesopstyles.htm.
  2. In the head, put in a link to x21.css, just as you did in Step 1.
  3. In the body, paste the text from aesop_fables.txt.
  4. Format each story as follows:
    1. "The Fox and the Crow"
      • Name: h2
      • Story: p
      • Moral: p class=moral
    2. "The Sick Lion"
      • Name: h1
      • Story: p class=large-serif
      • Moral: p class=moral, and use span to make the font large-sans
    3. "The Ass and the Lapdog"
      • Name: h3
      • Story: p class=medium-sans
      • Moral: p class=moral, and use span to make the font large-sans
    4. "The Lion and the Mouse"
      • Use div to make the font small-sans for the entire section
      • Name: h3
      • Story: p
      • Moral: p class=moral

Once again, check your file to make sure the formatting comes out as resquired. Troubleshoot and debug as needed.

When you're satisfied, validate both your files:
Step 3: Changing the Original Stylesheet


to Top

 

to Top

An example of what the pages should look like in a browser is available. This is shown in Opera 7.54, reduced to 70% in full-screen mode in order to fit the entire document on one screen, so yours will look bigger, longer, and narrower. However, you should be able to see the colors, sizes, alignment, and overall formatting. Link here to view:
x21i.htm and aesopstyles.htm
Screenshot thumbnail    Screenshot thumbnail

To see the effect of external stylesheets, make the following changes to x21.css:

  1. element body: color green, font-family Georgia, "Times New Roman", serif
  2. elements h1 - h6: all font-family Verdana, Arial, Helvetica, sans-serif

Save the stylesheet and reload in the browser the two files that use it. Check each file to see what differences (if any) there are.
Submitting the Assignment

to Top 		to Top

When you're done, double-check that the assignment meets the specifications above, and that all links are functional.

Upload your three files to your WCC student Website, and send email to the instructor with the URI of each one:

  1. x21.css
  2. x21i.htm
  3. aesopstyles.htm

Be sure your email meets the formal requirements: name, class, section and exercise (x21i), and that it follows standard business-email practice.

to Top About This Document
Audience

to Top

This exercise is for people who have created internal style sheets (see module X21h) and are ready to begin applying external style sheets.

 
Objectives

On successful completion of this module, you will be able to:

  1. Add an external stylesheet to a Web page
  2. Properly use <div> and <span> tags with styles
  3. Begin to put the "cascade" to use.
Module x21i: Formatting with External Stylesheets
This document is part of a modular instruction series in Computer Instruction. For more information, see the overview or the list of modules in this series, X: "XML, XHTML, DHTML, CSS". This document has been used in the following classes: INP 270.
History
Original: 18 March 2003
Last modification: Monday, 31-Aug-2009 11:48:08 EDT
Copyright
Copyright © 2003, Laurence J. Krieg, Washtenaw Community College
Instructors: You may point to this file in your Web-based materials; however, its location may change without notice.
Students: You are welcome to make a copy for your personal use.
All other uses: Please contact the author, Laurence J. Krieg, for permission: krieg@ieee.org.