Chapter 9 - CSS Introduction

Now that you've had an introduction to XHTML, graphics, web design and web site development concepts, you are ready to study a more advanced technique of formatting web pages - Cascading Style Sheets (CSS).

CSS is not new -- it was first proposed as a standard by the W3C in 1996. However, CSS has just recently begun to be supported by browsers and other user-agents in a more standard manner. Cascading Style Sheets is a useful technology for separating the presentation style of the web page from the information on the web page itself.

You may recall that the <font> tag is deprecated. This means that while it is still part of the W3C recommendation, it will be dropped from the recommendation in the future. Cascading Style Sheets are used to fulfill the function of the <font> tag in addition to providing many other web page formatting and positioning capabilities. This chapter will introduce you to the use of Cascading Style Sheets (CSS) on the Web.

CSS Documentation	CSS Tutorials
W3C Overview of CSS W3C CSS1 Recommendations W3C CSS2 Recommendations Eric Meyer's CSS Mastergrid CSS Validator	Dave Raggett's CSS Tutorial EchoEcho.com Mako.com HTML Goodies W3School's CSS Tutorial
More CSS Links
CSS Zen Garden SitePoint's CSS Reference New! CSS Vault Microsoft IE7 CSS Compatibility Issues
CSS and Font Sizes
Wondering how to correspond XHTML font sizes (1, 2, 3, 4, 5, 6, 7) to CSS pt and px configurations? Like so many areas in web technology, the answer is ... it depends! Since the pt is browser dependent (for example, 12 pt looks different when various browsers are used to display web pages) and the px is monitor-resolution dependent, there is no hard and fast rule for correspondence. CSS fonts can also be configured usin "ems" (relative size -- the term is borrowed from the print industry) which is something I don't get into at this point -- after all it's just your first week using CSS!	View a page containing a table with various configurations in multiple browsers and in different monitor resolution settings. You'll see differences in the display of the text. Note that the CSS font size text values (such as xx-small, x-small, small, large, x-large, xx-large) roughly correspond to the numerical font sizes of 1 through 7. Deciding on the target client platform (including browser and monitor resolution) is part of the web design process. Right now, Internet Explorer at 1028x768 and 800x600 resolution is the most common, although Firefox is gaining support.
Configuring CSS "Buttons"
CSS is often used to configure interactive hyperlinks (that change properties when a mouse hovers over them). See the navigation links on the left side of this page for an example. Be aware that there are differences in the ways that browers render the styles. Testing is crucial. See the sample CSS "Buttons" for more informaiton.
101 CSS Techniques
A quick tour of 101 popular CSS techniques will get you started with CSS sprites, rounded corners, transparency, drop-shadows, and more!

Chapter Updates

Page 353 Updated Figure 9.11:
New Figure 9.11 -- The Cascade

Questions or Comments?

The author would like to hear from you!
Send an e-mail to webdevfoundations@hotmail.com

Review Games
Chapter 9 Review

Flash Cards
Pick a Letter
Fill in the Blank
Matching
Crossword Puzzle

Resources

W3C
W3C HTML Validator
W3C CSS Validator

Color Chart
Design Checklist
Fireworks Tutorial
Flash Tutorial

A List Apart
SitePoint
Good Experience
Digital Web
Dreamweaver
FrontPage