Week 5
Cascading Style Sheets

Introduction

This week begins your experience with Cascading Style Sheets. For those who learned some HTML prior to around 1998, style sheets are the biggest change to master. They represent a major shift in coding practice. So far, we've been combining the content of a page with all of its formatting. But now we begin to move the formatting instructions away from the content and put them in a separate place. This makes it possible to manage our pages more efficiently.

Look at the bottom of this page and you'll see I've added a new validation icon. This one is for CSS. It works a little differently than the one for XHTML but it still serves the same function of identifying any code problems.

So read on and start stylin'. Be sure to read the material on this page carefully.

Objectives

• Apply styles using 3 types of style sheets:
  • external
  • embedded (internal)
  • inline
• Understand and use the following types of selectors:
  • simple
  • group
  • contextual
  • class
  • id
• Add a comment within CSS
• Demonstrate the use of the following properties:
  • background-color
  • background-image
  • background-repeat
  • background (a shorthand property)
  • border (border-style, border-width, border-color and the shorthand property called border)
  • color
  • font-family
  • font-size
  • font-style
  • font-weight
  • margin (and margin-top, margin-left, etc.)
  • padding
  • text-align
  • width

Lesson

Introductory Lecture (20 minutes):

• Audio only (.ra file that requires RealPlayer)
• PowerPoint File that is used in the lectur. eYou can view it and manually change the slides (a synchronized version will be posted on Thursday). You may want to print it out the PDF version of the PowerPoint.

Exercises and Reading

1. Complete recipe.htm and recipe2.htm according to the instructions on the introductory CSS exercise page.
2. Learn and experiment with the use of each of the objectives listed for this week. Resources include Appendix D of the Callihan book and the resources listed under CSS "How to" in our class resources list. Work through the W3Schools CSS tutorial on "Basic CSS" to learn this material. You may wish to use the Web Developer Extension's CSS > Edit CSS tool as you experiment and learn.
3. Read p. 311-318 in Callihan. We will be using mostly the CSS1 selectors in this class but it is good to be aware of the CSS2 and attribute selectors discussed on the last 2 pages.
4. See this information on how to validate your CSS (opens in new window)

Activities

1. Look at the external style sheet for the Libr240 pages and decipher its code. See instructions for this activity.

2. CSS Review of Terms
http://www.quia.com/jg/520536.html
This is available as a resource to help you review.

3. CSS Selectors Review (8 questions)
http://www.quia.com/pop/82184.html
To help strengthen your understanding of types of selectors.

4. See the CSS Zen Garden. You won't believe what you'll see at this site. The same XHTML document is used by each different designer who creates a design for the page. Click on the links under "Select a Design" and see some of the many different ways the same basic document can be styled! We will be doing a simplified version of the Zen Garden with this Week 5 Libr 240 page.

5. Just for fun, see this series of screenshots that show the design process at work. MBoffin.com shows how the design of the page changed as different parts of the CSS were added to the code.
Designline for the Open Air blog template - 879k Animated GIF"

Source: http://mboffin.com/post.aspx?id=1619

Assignment #5

Be sure you work through the lesson and the activities. They will prepare you for the assignment.

1. CSS Zen Mini-Garden. Create a new stylesheet for this page. You can either use an embedded style sheet or an external one. Begin with the plain unstyled version (linked here) and add your own styling for fonts, colors, text-alignment, borders, and any other CSS you'd like to use. Be creative! Have fun. We'll compare some of these and vote for a new temporary style for the Libr 240 pages. The rule: You cannot change the XHTML code in the body of the page.

2. Create 2 XHTML pages that are related and link to each other. Content is your choice. Validate each one to be sure the code is valid XHTML (styles won't work properly unless the XHTML is valid). Include the XHTML validation logo on your pages.

Use one external style sheet to format the appearance of both of the pages.

The stylesheet should:

1. be validated (I suggest validating a few times as you are building it.) You do not need to include the CSS validation logo but I will be checking to see if the CSS validates.
2. include at least one use of each of the following (see p. 316):
   1. simple selector
   2. group selectors
   3. contextual selectors
   4. class selectors
3. control the background color and background image of the pages
4. control the color of the foreground (text)
5. change the appearance of links when the mouse moves over them
6. control the fonts used in the pages
7. center a heading using CSS (not using align="center" or <center>)
8. demonstrate use of a border
9. demonstrate control of a margin
10. define two different table styles that are called into the pages by means of the class attribute. Example: You could have table class="one" that is formatted one way (perhaps with borders of 1 pixel in purple and a daisy background) and table class="two" that is formatted in a different way (perhaps with no borders showing and with a background color of green). You would have 2 different tables on your page (one using class="one" and the other using class="two"). Resource: See the table styles page.

Each item in the CSS should be used within at least one of the pages. Do not just blindly copy a style sheet from somewhere else and use it. Your style sheet must meet the criteria listed above.

Remember to upload your CSS page as well as your two XHTML pages. Also, remember to upload any image files that are used.

3. Through Blackboard, submit a Word document with the following:

1. URL for your styled version of this page (2 points)
2. URLs for your two related XHTML documents AND the corresponding style sheet (3 points)

The assignment is due by midnight on Wednesday, September 27.
See grading criteria for assignment 5 (PDF).