What are Cascading Style Sheets?


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.

Table 1.1. CSS Property Categories

CATEGORY

WHAT YOU CONTROL

FOR MORE INFO

Font

Letter form, size, boldface, italic

Chapter 3

Text

Kerning, leading, alignment, case

Chapter 4

Color & background

Text color, color or image behind the page or behind a single element on the page

Chapter 5

Box

Margins, padding, borders, width, height

Chapter 6

Visual formatting

Exact placement in the browser window, text wrap

Chapter 7

Visual effect

Visibility, visible area, opacity

Chapter 8

User interface

Mouse pointer, scroll bars

Chapter 8

Table

Table borders, margins, captions

Chapter 9

Generated content, automatic numbering, and list

Bullets, numbered lists, indentation, quotes

Chapter 10


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.

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).


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.





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net