Course Technology Logo   Principles of Web Design
3rd Edition
    Home  >  Chapter 6

Table of Contents
 Home
 Chapter 1
 Chapter 2
 Chapter 3
 Chapter 4
 Chapter 5
 Chapter 6
 Chapter 7
 Chapter 8
 Chapter 9
 Chapter 10
 Chapter 11
red dot image
Web Warrior Series

Chapter 6 - Introducing Cascading Style Sheets

Cascading Style Sheets (CSS) let you control the display characteristics of your Web site. In this chapter, you examine the basic syntax of CSS and learn how to combine CSS rules with your XHTML code.You start by examining the CSS style rules, and then apply them to build a basic style sheet.Then you learn how to cascade style sheets, or let multiple style sheets and style rules apply to the same document.You also learn basic selection techniques to apply a particular style declaration to an element in your document. Finally, you build on this information to use the advanced selection techniques of using the class attribute and the <div> and <span> elements.

When you complete this chapter, you will be able to:

  • Understand CSS style rules
  • Build a basic style sheet
  • Understand the cascade
  • Use basic selection techniques
  • Use advanced selection techniques

Exercise Files

  • Download basic.htm, the source file for the "Building a Basic Style Sheet" exercise
  • Download oz.htm, the source file for the "Using the Basic Selection Techniques" exercise

Case Project

Revisit your project proposal and the page designs you created in Chapter 5. How will you implement Cascading Style Sheets into your project Web site? In the next few chapters, you will learn how to control typography, white space, borders, colors, and backgrounds with CSS. Think about each of these style characteristics and how you will apply them to your page designs. Additionally, make a list of possible class names you might use to identify your content. For example, consider using class names for the following page characteristics, as well as creating some of your own:

  • Body copy
  • Header (possible different levels)
  • Footer

Top