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 HTML 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. You learn about two elements, lt;div> and <span>, that were expressly created for use with CSS. Advanced selection techniques include using the class attribute and id attribute to provide customized naming for your elements. Finally you learn about using pseudo-selectors and pseudo-elements to select and apply CSS styles to hyperlinks and other parts of HTML documents.

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
• Work with the <div> and <span> elements
• Use pseduo-classes and pseudo-selectors

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

Individual 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

Team Case Project

Revisit your project proposal and the page templates you created in Chapter 5. Each team member is responsible for individual templates, such as the home page template, the section page template, and the article level page template.

In the next few chapters, you will learn how to control typography, white space, borders, colors, and backgrounds with CSS. Decide how you will handle these style characteristics in your Web site. Each team member should create a suggested list of styles and naming conventions for use in your site.

for consistency throughout the site? You might want to name these A-head, B-head, and so on. Also you will need to segregate and name the different copy styles in your site. For example, you might have a different body copy style for the main page than you have on secondary section and reading level pages. Think about the different style properties that you will be able to manipulate (you can look these up in Appendix B) and how you will consistently use, manage, and name these style characteristics for your project Web site. Meet as a team to review each member's ideas and come to an agreement on the proposed styles and naming conventions.

Top