By Matt Rotter, Charity Kahn, and Paul Anderson

HTML can be frustrating when you want to control the appearance of your Web page and its contents. Tables are awkward, frames are annoying, and FONT tags threaten to overwhelm your code. But for the first three generations of browsers, HTML was all you had to work with. Not anymore.

The truth is that HTML was intended to mark up only a Web page’s structure and not how it displayed on the screen. For the appearance of Web pages, the World Wide Web Consortium (W3C) developed a complementary markup system called Cascading Style Sheets, or CSS, designed to make it easy to define a page’s appearance without affecting its HTML structure.

Style sheets work like templates: you define the style for a particular HTML element once, and then use it over and over on any number of Web pages. If you want to change how an element looks, you just change the style; the element automatically changes wherever it appears. (Before CSS, you had to change the element individually, each time it appeared.) Style sheets let Web designers quickly create more consistent pages–and more consistent sites.

Browsers began supporting the first CSS Specification, Cascading Style Sheets, Level 1 (CSS1), in versions 3.0 of Opera and Microsoft Internet Explorer and in version 4.0 of Netscape Navigator. The 4.0 and later versions of all three browsers also support properties from the newer Cascading Style Sheets, Level 2 (CSS2) specification, which let you specify elements’ visibilities, their precise positions on the page, and how they overlap one another.

To help you get started, we’ll show you the basics of shaping your pages’ appearance with CSS1 and positioning with CSS2. Of course, you’ll need a 4.0 or later browser to see what we’re doing, so if you don’t have one, download one now.

Matt Rotter and Charity Kahn are software engineers for

Paul Anderson is an associate technical editor for CNET