Introducing the Advantages of Style Sheets

HTML's formatting capabilities are limited, to say the least. When you design a page layout in HTML, you're limited to tables, font controls, and a few inline styles, such as bold and italic. Style sheets provide lots of tools for formatting Web pages with precise control. With style sheets you can

• Carefully control every aspect of the display of your page: Specify page items such as the amount of space between lines, character spacing, page margins, and image placement. You can also specify the positioning of elements on your pages.

• Apply changes globally: You can guarantee consistent design across an entire Web site by applying the same style sheet to every Web page.

Quickly and easily modify the look and feel of your entire site by changing one document (the style sheet) instead of the markup on every page. Need to change the look of a heading? Redefine the heading's style attributes in the style sheet and save the sheet. The look of the heading changes throughout your site.

• Instruct browsers to control appearance: Provide Web browsers with more information about how you want your pages to appear than you can communicate using HTML.

• Create dynamic pages: Use JavaScript or another scripting language along with style sheets to create text and other content that moves, appears, or hides in response to user actions.

What CSS can do for a Web page

The gist of how style sheets work is this:

1. You define rules in a style sheet that specify how you want content described by a set of markup to appear.

For example, you could specify that every first-level heading (<h1>) be displayed in purple, Garamond, 24-point type with a yellow background (not that you would, but you could).

2. You link style rules and markup.

3. The browser does the rest.

The current specification, CSS2.1, can

• Specify font type, size, color, and effects

• Set background colors and images

• Control many aspects of text layout, including alignment and spacing

• Set margins and borders

• Control list display

• Define table layout and display

• Automatically generate content for such standard page elements as counters and footers

• Control cursor display

• Define aural style sheets for text-to-speech browsers

What you can do with CSS

You have a healthy collection of properties to work with as you write your style rules. You can control just about every aspect of a page's display — from borders to font sizes and everything in between:

• Background properties control the background colors associated with blocks of text and with images. You can also use these properties to attach background colors to your page or to individual elements.

• Border properties control borders associated with the page, lists, tables, images, and block elements (such as paragraphs). You can specify border width, color, style, and distance from the element's content.

• Classification properties control how elements such as images flow on the page relative to other elements. You can use these properties to integrate images and tables with the text on your page.

• List properties control how lists appear on your page, such as

• Managing list markers

• Using images in place of bullets

• Margin properties control the margins of the page and margins around block elements, tables, and images. These properties extend the ultimate control over the white space on your page.

• Padding properties control the amount of white space around any block element on the page. When used with margin and border properties, you can create some complex layouts.

• Positioning properties control where elements sit on the page, giving you the ability to place elements in specific places on the page.

• Size properties control how much space (in height and width) that your elements (both text and images) take up on your page. They're especially handy for limiting the size of text boxes and images.

• Table properties control the layout of tables. You can use them to control cell spacing and other table-layout specifics.

• Text properties control how text appears on the page. You can set such properties as font size, font family, height, text color, letter and line spacing, alignment, and white space. These properties give you more control over your text with style sheets than the font HTML element can.