Tables may have helped work around the problem of page layout in the past, but they aren’t really the officially sanctioned solution. Tables have been put to use in a way not originally intended in an effort to address a problem that had no solution at the time.
The need for more sophisticated control has been recognized for some years and the original cascading style sheets (CSS) specification was developed to handle the presen- tation of Web documents.
Background of CSS
CSS is a style-sheet language that separates presentation (format and style) from the content and structure provided in an HTML, XHTML, or XML document. The World Wide Web Consortium (W3C), a group of more than 350 member organizations, made its first style sheet recommendation, CSS1 (Cascading Style Sheets, Level 1), in 1996 (revised in 1999). CSS1 addresses style using common desktop publishing termi- nology. CSS2.1 (CSS Level 2, version 1) became a W3C Candidate Recommendation in February 2004. It contains all of CSS1 and addresses layout, including content posi- tioning, layout, automatic numbering, page breaks, and right to left text and has fea- tures for internationalization. In addition, it supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, Braille devices, handheld devices, and so forth. At this writing, CSS3 is still under development. It will contain all of CSS2.1 and will extend it with new selectors, fancy borders and backgrounds, vertical text, user interaction and speech, and much more. With CSS3, the W3C is taking a modular approach so that added functionality can be implemented and tested as they are ready without having to wait for all items to be completed.
How CSS Works
With CSS, a Web author can control style and layout elements such as font, type size and color, margins, indentations, line spacing, and more. CSS provides separate style
rules that are used to format HTML elements. Instead of trying to control formatting from within an HTML element, which has to be specified each time the attribute is used, CSS allows the author to specify the style once, and it is automatically applied to the HTML element each time it is used. For instance, using the customary formatting in HTML (which has now been deprecated), if you wanted the headline for your page to be an Arial font that is green and in italics, you would code your headline tag like this every time you used a headline:
<h1>
<font face=“Arial, Helvetica, sans serif ” color=“#009900”>
<i>Headline</i>
</font>
</h1>
A style sheet allows the attributes for an element (or selector) to be specified by the author three ways. First, in an external file (ending with the file extension .css) that resides on the Web server. In this case, you enter the path to that file in the head of your document:
<head>
<link rel=“stylesheet” href=“../tutorial.css”>
</head>
Second, embedded in the header of the document:
<head>
<style type=“text/css”>
<!--
h1 {font-family: Arial, Helvetica, sans serif; font-size: x-large; font-style: italic;
line-height: normal; font-weight: bold; color: #009900}
-->
</style>
</head>
Third, expressed inline, to override the general style for one occasion:
<h1 style=“color: #ff0000; font-family: Times, Times New Roman, serif;”>
A New Headline Color and Font with Inline CSS</h1>
The obvious benefit of using an external file to store your styles is that you have to make changes in only one document to execute sitewide modifications.
It’s not necessary that you pick just one way to apply styles. Cascading style sheets are called this because more than one style sheet can be used on a document, with dif- ferent levels of importance assigned depending on the location of the style designa- tion. If you define different styles for the same element, the style that is closest to the HTML tag prevails. For example, the style specified in the tag takes precedence over
one designated in the head of the document. The style in the head of the document is more important than the one located in the external .css file. This comes in handy when you want to make one-time adjustments to an element on a particular docu- ment or a section of a document but prefer that the original style stay in place over the rest of the site.
To look at a basic example of how applying styles changes the display in a browser, study figure 5.14. The document is shown being authored in Dreamweaver (lower right screen). No styling is evident. But when it is displayed in a CSS-supported browser (upper left screen), dramatic visual enhancements are evident. This is accom- plished with an external style sheet referenced in the <head> tag of the document:
<link REL=“stylesheet” HREF=“libtutorial.css” TYPE=“TEXT/CSS”>
CSS Syntax
CSS is expressed in easy-to-understand scripting. As mentioned, standard desktop publishing terminology is used, so if you understand setting up styles in that environ- ment, it shouldn’t be too difficult to learn CSS. And, as discussed in chapter 4, many development tools are available to automate the process. A specific syntax is used to construct statements that define the rules being set.
A CSS statement consists of a selector and a declaration block. The declaration block consists of a list of semicolon-separated declarations in curly braces. A declara- tion consists of a property, a colon (:), and a value.
Take a look at this rule for a Heading 1:
h1 {
position: absolute;
top: +50px;
left: +50px;
color: #008080;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
The selector is h1and there are five declarations in the declaration block: position, top, left, color, and font-family. In each declaration, the text to the left of the colon is the property (for example, position). The text to the right of the colon is the value (for example, absolute). CSS information can come from a variety of sources, which include the author (as discussed), the user (a local file controlled at the browser level, to override the author’s styles), and the user agent (that is, the browser’s default pre- sentation of HTML elements).
The main advantages of using CSS are that presentation information for an entire site can be contained in one document, allowing swift and easy updating, different users can have different styles to serve their particular needs (large print, for example), HTML code is reduced in size and complexity, and it can be used with XML.
Browser support for CSS is increasing, but don’t expect to see support in versions older than 4.0 of Internet Explorer and Netscape Communicator. If you implement style sheets for your design control, be aware that users whose browsers don’t support CSS will be able to see the content, but not the styles, which the browser will ignore.
This can affect the presentation of your content, so you may want to postpone using styles until you are certain that everyone in your audience uses a browser that can han- dle CSS. In 2005, there is good support for CSS1 by most current browsers. Support for CSS2.1 is best in standards-compliant browsers such as Opera, Mozilla, and Firefox. Some of these even provide partial support for CSS3.
Detailed information about cascading style sheets can be found on the W3C’s Web site (http://www.w3.org/Style/CSS/).