CSS, DHTML, and Ajax, Fourth Edition

CSS brings to the Web the same "one-stop shopping" convenience for setting styles that's available in most word processors. You can set the CSS in one central location to affect the appearance of a particular HTML tag on a single Web page or across an entire Web site.

Although CSS works with HTML, it is not HTML. Rather, CSS is a separate code that enhances the abilities of HTML by allowing you to redefine the way that existing tags display their content.

For example, the heading level 1 tag container, <h1>…</h1>, allows you to apply styles to a section of HTML text, turning it into a heading. But the exact display of the heading is determined by the viewer's browser. You cannot control how it will be styled in your layout. Using CSS, however, you (the designer) can change the nature of the heading tag so that it will be displayed in the style you wantfor example, bold, Times font, italic, red, and 14 points (Figure 1.3). As with word processor styles, you can later choose to change the definition of the <h1> tag (for example, make the text 18 points) and all heading level 1 elements on the affected Web page will automatically be restyled.

Table 1.1 shows some of the things you can do with CSS and where to find more information.

How does CSS Work?

When a visitor loads one of your Web pages, either by typing the address into a browser or by clicking a link, the server (the computer that stores the Web page) sends the HTML file to the visitor's computer along with any files linked to or embedded in the HTML file, such as images or movies. The CSS code, or style sheet, can be either embedded directly in the HTML file or linked to it. Regardless of where it's located, the visitor's browser will interpret this code by using its particular rendering engine to apply the CSS to the HTML, and then display the page in the browser window (Figure 1.4).

The interpretation and application of the style sheet by the browser's rendering engine is where our headaches begin. The W3C has gone to great lengths to specify how browser manufacturers should render the code, but bugs, omissions, and misinterpretations still creep in, meaning that no two browsers will render a Web page exactly the same. For the most part, these differences will go unnoticed by the user, but occasionally these differences are glaring and require you to do some extra work to get the page to look right in the broadest spectrum of browsers.

Tips

• The power of CSS comes from its ability to mix and match different rules from different sources to tailor your Web pages' layout to your exact needs. In some ways, it resembles computer programmingwhich is not too surprising, because a lot of this stuff was created by programmers rather than designers. But once you get the hang of it, CSS will become as natural as putting together a sentence.

• Sometimes a Web browser will render HTML content before the style sheet is applied to it, so you may see a "naked" or unstyled page flash briefly on the screen.

• There is always the possibility that your Web page will be displayed without the CSS code, either because of an error or because the device being used does not accommodate CSS (such as a mobile phone browser, for instance). You should always consider how your page will look without the style sheet, and make sure that structurally it makes sense (Figure 1.5 and Figure 1.6).