Hour 1. Understanding CSS

What You'll Learn in This Hour

What style sheets are and what the term "cascading" refers to
How the Cascading Style Sheets standard was written and what the two levels of CSS refer to
How CSS is used with HTML and XML and when to use it
The types of style effects you can produce with CSS and what you can't do
How browser support for CSS affects what you can do with style sheets

Cascading Style Sheets (CSS) can open up a whole new dimension to your web designs, delivering power and flexibility beyond what's available in plain HTML.

What Are Cascading Style Sheets?

Cascading Style Sheets is the name of a simple language that enables you to declare how documents are displayed by web browsers. This language is used extensively on the Web and can be applied to HTML as well as to newer XML-based languages.

Through the application of CSS, you're able to change many aspects of how a web page is displayed—the fonts, the colors, the layout, the graphics, the links, and more. Cascading Style Sheets enable content—your HTML markup, text, graphics, and multimedia—to be separated from presentation.

Defining Style Sheets

The concept of style sheets did not originate on the Web; it has been used extensively in computing for years now. The most familiar application of style sheets off the Web is the formatting styles used in word processors, such as Microsoft Word.

Microsoft Word allows you to assign parts of your file to specific styles, such as "Heading" or "Note," and then decide what sort of formatting should be applied to each style. For example, a Heading style should be larger and bold, with extra line spacing after the heading and in a specific heading font. This book, in fact, was composed in exactly that way; each part of the book, from headings to text paragraphs to tips and notes, has a specific style that I set as I composed the manuscript, and those styles eventually determined how you see the printed page today.

In the same way, Cascading Style Sheets let you, the web designer, assign specific styles to different types of HTML elements. You might want to make all your text one color, to make all your headings a specific font, and to specify that all notes should be centered in a box with a thin outline. You can do some of this in HTML by using tags and various attributes, but that can get cumbersome and difficult to maintain. When you define your presentation styles in CSS, it becomes quick and easy to apply new styles that can affect all styles on a page or even the whole site—without editing the source HTML at all!

Defining Cascading

The term cascading in Cascading Style Sheets refers to a specific way in which browsers determine which styles to apply to a specific part of the page. This method is called "the cascade," and it's from the cascade that CSS takes its name.

When I'm designing something that I know is going to be used in a fixed medium, such as the printed page or this book, I can be pretty confident that the styles that I choose will show up exactly like I expect them to. All copies of this book will look exactly the same; the page layout won't vary from reader to reader, and the same fonts will appear in each copy. Page 57 of your copy of this book is identical to every other page 57 in existence.

When you're designing for a variable medium such as the Web, however, you don't have that certainty. The appearance of a web page (designed with CSS or not) depends on a number of factors, including the characteristics of the user's display device, his computer's color resolution, the version of the browser he's using, and even his preferred font size.

Did you Know?: Some users might not even be using monitors at all! People with visual disabilities routinely use the Web as a primary source of information, relying on software known as screen readers, which vocalize the content of a page. You'll learn more about how CSS benefits users with disabilities in [Hour 22], "Accessibility and Print Media"; you can also read more at the International Center for Disability Resources on the Internet website at http://www.icdri.org/.

This lack of absolute control over the final presentation can be somewhat disconcerting for designers who are used to fixed mediums; how can you fine-tune your design if you don't know how it will eventually look? It's important to keep in mind that this isn't a design flaw in CSS—it's a deliberate feature. Creating designs that adapt to the user's environment and preferences widens your audience and enables more people to access your content.

The cascade is the set of principles that tells browsers how to merge together a number of presentation choices: the web developer's designs for the site, the web browser's capabilities and default settings, and the web user's preferences or requirements for display. In the cascade, items that are higher up in priority affect other properties with lower priorities, with the values "cascading" down like a waterfall. You'll learn more about this in [Hour 7], "Cascading and Inheritance," but for now it's enough to understand that in CSS, the final presentation is an active collaboration between designer, browser, and user.

The Origin of Cascading Style Sheets

The Cascading Style Sheets language was created through a collaborative effort between web developers and browser programmers under the auspices of the World Wide Web Consortium (W3C for short).

The W3C is an international industry group, comprising hundreds of companies, research institutions, and web development organizations, that issues technical specifications for web languages and protocols.

W3C specifications are called recommendations because the W3C is technically not a standards-issuing organization, but in practice this is usually an issue of semantics. W3C recommendations are taken as defining a standard form of a web language, and they are used by web developers, software tool creators, browser programmers, and others as a blueprint for computer communication over the Web. Examples of W3C recommendations include Hypertext Markup Language (HTML), Extensible Markup Language (XML), Extensible Stylesheet Language (XSL), and Scalable Vector Graphics (SVG).

The CSS Specifications

The W3C recommendations issued by the Cascading Style Sheet working group are collectively the official specification for the CSS language. The CSS working group consists of a number of experts in web development, graphic design, and software programming, representing a number of companies, who all work together to establish a common styling language for the Web.

Two full recommendations have been issued for Cascading Style Sheets so far; these are called Cascading Style Sheets Level 1 (CSS1) and Cascading Style Sheets Level 2 (CSS2). An update to CSS2, CSS 2.1, has been drafted and is gaining acceptance. Work is under way currently on Cascading Style Sheets Level 3, but these are only draft proposals at the time of writing.

CSS Level 1

The Cascading Style Sheets Level 1 (sometimes called CSS1 for short) specification was officially issued as a W3C recommendation in December 1996. The URL for this specification is http://www.w3.org/TR/REC-CSS1.

Did you Know?

If you try to read the W3C recommendation for CSS1, you may end up confused. That's because W3C documents aren't written as a general introduction to a subject but rather as precise language definitions for software developers. Most W3C recommendations are quite opaque to most normal people, although the CSS1 specification isn't too bad compared with some. Later in this hour I'll give some tips on how to read a W3C recommendation if you need to dive into it.

CSS Level 1 defines a number of simple text formatting properties, along with properties for colors, fonts and boxes, principles of the cascade, and the linking mechanism between CSS and HTML. CSS1 may be used to create some impressive results, but it doesn't deliver the full range of function found in CSS Level 2.

CSS Level 2

CSS Level 2 was published in May 1998 (at http://www.w3.org/TR/REC-CSS2) and extends the power of CSS considerably. CSS Level 2 enables the web developer to use CSS to lay out a page, replacing HTML tables; to create style sheets for specific output devices, such as printers or even Braille devices; to have fine control over which parts of the page receive styling; and to designate a wider range of effects, such as text shadows or downloadable fonts. CSS Level 2 includes and extends all properties and values defined in CSS Level 1.

CSS Level 2.1

The W3C published a working draft in June 2005 called Cascading Style Sheets, Level 2 Revision 1 (http://www.w3.org/TR/CSS21), more commonly known as CSS 2.1 This update to the CSS2 specification is not yet a formal W3C recommendation, but was written to reflect a snapshot of the current state of CSS implementation in browsers. CSS properties and values that were not widely supported by the browsers were cut from the specification, a few widely supported values were added, and various problems in the definition of the CSS language were fixed.

CSS 2.1 has been adopted as a de facto standard, if only because it gives a good approximation of the most workable features in CSS2. Generally speaking, nearly all CSS 2.1 style sheets should work properly in the newest versions of the major browsers, and most web developers are writing in CSS 2.1 (even if they haven't read the official specification). For those reasons, this book focuses on CSS 2.1 when there is a conflict between the CSS2 and CSS 2.1 languages; CSS 2.1 is the safer, saner version.

Other Style Languages

CSS isn't the only style language, but it's the primary one used on the Web. Some other style languages include Document Style Semantics and Specification Language (DSSSL) and Extensible Stylesheet Language (XSL).

DSSSL is an older and more complex styling language developed for Standard Generalized Markup Language (SGML), an ancestor of XML and the basis for HTML syntax. DSSSL is rarely used on the Web, just as other SGML technologies (besides HTML) are extremely uncommon.

XSL is a group of related languages intended for styling XML documents. XSL Transformations (XSLT) is a method to describe a transformation from one XML-based language to another. XSL Formatting Objects (XSL-FO) is one such language; an XML document can be converted to XSL-FO with XSLT. XSL-FO files contain XML formatting objects, which can be used by browsers or printing software to lay out the appearance of a document precisely, most commonly for print media.

CSS in Web Design

Because the Cascading Style Sheets language was designed to be used primarily with HTML, CSS is ideally suited for use in web design. The language is simple and flexible enough to encompass all common web presentation effects, and the concepts should be familiar to anyone who has used HTML before. To use the CSS language effectively, it's important to understand how it's used, what it can do, and what it can't do.

How CSS Is Used

In CSS, the term style sheet refers to a file consisting of a number of CSS rules. A rule is the smallest unit of CSS, defining one or more style effects. Each rule identifies which parts of the web page it selects and what properties it applies to that section of the page. The web document then links to that style sheet, which means the browser downloads the style sheet and applies the rules when it displays the web page. A single CSS file can be linked to by any number of documents, so one style sheet can control the look of the entire site or a portion thereof.

CSS can be used with several different markup languages, including HTML and XML-based languages.

CSS and HTML

The Hypertext Markup Language (HTML) consists of a series of tags that mark up specific elements within a document. Each of those elements has a default presentation style, which is provided by the browser, based on the formal specification for HTML. You can apply a style sheet to an HTML page by linking to it or even by including the style sheet within the HTML file, and the presentation style for each element can be redefined.

A hypothetical style sheet can be created that states that all <h1> tags should be presented on a green background with white text, and all <p> tags should be indented 25 pixels and the text justified. This would change the appearance of any web page that links to that style sheet.

HTML pages can contain attributes and tags that set presentational styles, but their versatility and utility are limited compared with CSS. Style sheets can be used either in conjunction with HTML presentational markup, such as <font> or color="red" attributes, or can replace presentational tags and attributes entirely.

For example, CSS is used extensively to define the colors, look, and layout of this book's author's personal site (http://kynn.com/). In [Figure 1.1], no style sheet has been applied to the site, and so the appearance is quite plain. No HTML attributes have been used for formatting because the site relies on Cascading Style Sheets for presentation effects. The fonts are all browser defaults and the colors are very basic. Despite the somewhat boring appearance, all information is clearly visible and the page can be used easily. All that it needs is a style sheet to make it look better.

[Figure 1.2] is the author's site as it appears in a browser that understands Cascading Style Sheets. The style sheet not only specifies more attractive fonts for the page, but it also reformats the navigation bar, lays out the page in columns, and aligns the content attractively. The overall effect of the style sheet is to enhance the appearance considerably, making the site appear more friendly, identifiable, and usable.

What does CSS look like? In [Figure 1.3] you can see an example of the CSS "source code" used to style the web page in [Figure 1.2]. As you can see, the CSS language is very different in form and syntax from HTML.

CSS and XML

Cascading Style Sheets are also designed to work with Extensible Markup Language (XML). XML languages often don't have an inherent presentation defined, and CSS files can be applied directly to XML files to add presentational styling.

By the Way: For most of this book, I'm going to assume you're using CSS with HTML. The techniques for using CSS with XML are pretty much the same as using CSS with HTML. Specific issues related to XML are covered in Bonus Web [Hour 2], "CSS and XML," available on this book's website (described in the Introduction).

What CSS Can Do

As you see on the author's site, the application of a style sheet can drastically change the appearance of an HTML page. CSS can be used to change anything from text styling to page layout, and can be combined with JavaScript to produce dynamic presentation effects.

Text Formatting and Colors

CSS can be used to produce a number of text effects, such as

Choosing specific fonts and font sizes
Setting bold, italics, underlines, and text shadows
Changing text color and background color
Changing the colors of links or removing underlining
Indenting or centering text
Stretching and adjusting text size and line spacing
Transforming sections of text to upper-, lower-, or mixed case
Adding drop-capitals and other special effects

These are all accomplished by creating CSS rules to set properties on text.

Graphical Appearance and Layout

CSS can also be used to change the look of the entire page. CSS properties for positioning—sometimes called CSS-P—were introduced in CSS Level 2 and enable you to format a web page without using tables. Some of the things you can do with CSS to affect the graphical layout of the page include

Setting a background graphic, controlling its location, tiling, and scrolling
Drawing borders and outlines around sections of a page
Setting vertical and horizontal margins on all elements, as well as vertical and horizontal padding
Flowing text around images, or even around other text
Positioning sections of the page in precise locations on the virtual canvas
Redefining how HTML tables, forms, and lists are presented
Layering page elements atop each other in a specified order

Dynamic Actions

Dynamic effects in web design are those that are interactive, changing in response to being used. CSS lets you create interactive designs that respond to the user, such as

Mouseover effects on links
Dynamically inserted content before or after HTML tags
Automatic numbering of page elements
Fully interactive designs in Dynamic HTML (DHTML) and Asynchronous JavaScript and XML (AJAX)

What CSS Can't Do

Although CSS is powerful, it does have certain limitations. The primary limitation of CSS is that it is restricted to working mainly with only what is present in the markup file. The display order can be somewhat altered, and a small amount of text content can be inserted, but to produce major changes in the source HTML (or XML), you need to use another method—such as XSL Transformations (XSLT).

Also, CSS is a younger language than HTML by about five years; this means that some of the oldest browsers don't understand styles written in CSS, or might not load a style sheet at all. CSS is also of limited use on simple text browsers, such as those written for cell phones or mobile devices.

The Cascading Style Sheets language was designed to be backwards compatible, which means older browsers don't refuse to show your web page if they aren't able to display your styles. Instead, the default HTML presentation is used, and if you've designed your CSS and HTML properly, the page content is usable even if your CSS styles aren't shown. This allows older browsers to access even advanced CSS pages.

When to Use CSS

After you start learning to create Cascading Style Sheets, you probably will never want to stop using them! You can start using CSS today, as a supplement to your presentational markup, and then gradually move toward purer CSS presentations as you learn more.

Reading W3C Specifications

You may find yourself referring to the CSS recommendations from time to time—as well as the HTML and XHTML specifications as well. As they define the language, a specification is considered the definitive source for that language. After you get the hang of reading the CSS 2.1 specification, it makes a useful reference—but there's a learning curve.

A W3C recommendation is different from most other types of technical writing. Most technical works you're familiar with, from user manuals to books like this one, are written as documentation. Documentation is a user resource, something that helps you understand how to use a program or language. Tutorials, reference works, and textbooks are all written with that goal.

Standards, including the de facto standards of W3C recommendations, are written differently. The purpose of a standards document is to be definitive. A specification explicitly defines what is contained within a given set of technology. The key to comprehending a spec is not only understanding how it is organized but also understanding the intended audience and use of the specification.

In nearly all cases, the intended audience of a W3C specification is not you. It's not web developers, even though the languages defined by these specs are written for use by web developers. As a web developer, you'll definitely be able to gain useful knowledge from the W3C's recommendations, but that's just an ancillary effect.

[Figure 1.4] is an example—this is part of the CSS 2.1 specification; specifically, the part that defines a property called clip. Does this make sense to you? Probably not, because it's full of technical jargon, links to other parts of the specification, and advice on whether or not any "user agents" (browsers) must support a given feature.

The real audience for W3C recommendations is the software developers who create programs that use the protocols and languages in the specs. The CSS 2.1 specification, for example, was written primarily for implementers at Microsoft, Opera, Mozilla, Apple, and other software companies producing web-related software. In other words, people who already have a basic understanding of what the language does, and how other languages work with it.

One consequence of being written for those already in the know is that the W3C specifications aren't written linearly but circularly. To make sense of what's written in section two, you need to have read not only section one, but also sections three, four, and five, plus the appendix and about a half dozen related specifications. For a definitive work, that's actually quite appropriate; you can't read a dictionary straight through, either, and all terms in a dictionary are defined with other dictionary terms. W3C recommendations are written in the same manner, so you'll probably have to read through several times—following hyperlinks instead of just proceeding linearly—to fully grasp everything.

To approach a W3C recommendation, first understand the structure of the document. Nearly all are written with the same general outline. The first part of the structure looks like a bit of legalistic fluff, but is actually quite important; it identifies when the document was written and what status it holds in the W3C's hierarchy of technical recommendations. The W3C Process is a procedure for moving a working group's documents from draft to officially approved recommendation, and there are a number of steps along the way. The status of the document is stated at the very beginning.

A short introduction usually follows, which states the purpose of the recommendation. A glossary of terms might be provided at the front, but most commonly it is at the end; read it before the main content so you'll recognize the terms, even if they don't make sense until you've read more. Also at the end you'll find a list of references; W3C documents don't usually link directly to other sources but instead link to their reference lists. These references include the links out to other materials you can find on the Web, many of which are essential to making sense of what you're reading.

The main content is in the middle, of course, and is usually divided into sensible categories, although if you start following links within a recommendation, you'll find yourself skipping randomly through the text, which can be disorienting. The best W3C recommendations have small menu bars at the top that allow you to page between sections or, more usefully, to jump directly to an alphabetized table listing all elements, attributes, or properties. The index at the back of a long recommendation also proves invaluable when navigating the structure of the W3C specification.

Browser Support

Unfortunately for those of us who want to reap the full benefits of using CSS, the browser manufacturers were slow in providing support for CSS in their software. This meant that people who programmed authoring software didn't bother to produce CSS (after all, which browsers could display it?) and web developers didn't bother to learn CSS because it was a pointless exercise.

Early browsers that understood Cascading Style Sheets, such as Internet Explorer 3 and Netscape 4, had only incomplete implementations, meaning that even simple style sheets using rules defined in CSS1 might not have displayed consistently. This meant that CSS was considered unreliable for several years after the recommendations were issued.

Thankfully, the Dark Age of CSS didn't last forever, and current browsers have decent support for the CSS standards. Recent versions of Firefox, Internet Explorer, Opera, and Safari all have good implementations of the Cascading Style Sheet specifications. We're entering a new age of CSS, one where you can design safely and confidently, knowing that your style sheet won't confuse some old browser with buggy CSS implementations.

Workarounds for Browser Limitations

However, some older browsers still exist and are used by a number of web surfers, despite the poor and quirky support for CSS—most notably Internet Explorer versions 5, 5.5, and 6. Furthermore, not even the newest browsers adhere 100% to the specifications, although they come very close. In [Hour 3], "Browser Support for CSS," you'll learn more about what some of those limitations may be.

For these reasons, it may be necessary to employ workarounds or browser hacks in your CSS or HTML to ensure that your style effects come through as intended. These are described in [Hour 24], "Troubleshooting and Browser Hacks," and specific implementation problems are mentioned throughout the book when you need to know about them.

Summary

Cascading Style Sheets are files that describe how to present specific effects when displaying a web page. They're so named because they follow a specific pattern, called the cascade, which determines the order in which style effects are applied. The CSS language is a web standard, defined by the World Wide Web Consortium; the current version is CSS Level 2, updated by CSS 2.1.

A style sheet consists of CSS rules that define styles to apply to specific parts of the page. Style rules can change the color, font, and other qualities of the text of a page; they can define the layout and graphical appearance; and they can add interactivity to a site.

Although Cascading Style Sheets are quite powerful and useful, care needs to be taken to apply them in ways consistent with current browser implementations. Not all browsers have good CSS support, and using CSS without understanding the support issues can lead to problems if you're not careful.

Workshop

This workshop contains a Q&A section and quiz questions to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.

Q&A

Q.	Which version of CSS should I use?
A.	Cascading Style Sheets Level 2 is the most current W3C recommendation; it contains all the CSS1 properties and gives more complete definitions for them, in addition to defining new properties that weren't included in CSS1. Very few browsers (if any) supported only CSS1; most of them supported either a subset of CSS1 or a set chosen from CSS1 and CSS2 properties, so the division between the two is not really meaningful when you look at browser support. Because CSS 2.1 updates CSS2 to fix some problematic definitions and remove unimplemented property values, CSS 2.1 is your best bet for current and future compatibility. However, there are still implementation problems even with CSS 2.1, and so you have to test all your style sheets on a wide variety browsers.
Q.	So what's so cool about CSS anyway?
A.	Because Cascading Style Sheets let you encode your style effects separately from your HTML, this promotes separation of presentation and content. That means that the look of the page is independent from the information on the page, and that's cool for a number of reasons. You can create a single style sheet that styles the entire site at once. You can develop alternate style sheets for specific output devices, such as printers. You can ensure greater accessibility for people with disabilities. In addition, Cascading Style Sheets also afford a measure of control over the presentation, which simply is not available in traditional HTML web design.
Q.	What's the most important thing to know about Cascading Style Sheets?
A.	Browser support is the critical issue in CSS design. You will see this theme repeated throughout the book. Lack of browser support has seriously hindered the use of CSS, and many of the really great things you can do with style sheets continue to be limited in many browsers. Fortunately, the browser companies are working hard to improve their programs, and are getting ever closer to full, correct implementation of the CSS specifications.

Quiz

1.	What is the cascade in CSS?
2.	Which markup languages can be used with CSS?
3.	What's the current version of Cascading Style Sheets?

Answers

1.	The cascade is the set of rules that order how style preferences are combined together. The effects of higher-priority rules cascade down like a waterfall.
2.	CSS was designed to work with HTML as well as with any XML-based markup language.
3.	The current version of Cascading Style Sheets is CSS Level 2, updated by the CSS 2.1 draft.