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.
Figure 1.3. Styles being applied to an HTML tag.
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).
Figure 1.4. The code used to create the Web page is downloaded, interpreted, and then rendered by the browser to create the final display.
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.
Figure 1.5. An HTML page using CSS to add an image in the background, position the content down and to the right, and format the text.
Figure 1.6. The same code displayed without the benefit of CSS. The page still displays, but without the formatting in Figure 1.5.