What It Is & What It Does

At the beginning of the Web revolution, most HTML pages were bland:

And basic Help text was similarly uninspiring:

The Web browser and the Windows help layout engine determining the display style were focused on structure and content, not style. The idea behind HTML was to create a language that described the structure of information and displayed it accordingly. However, as writers and designers followed scientists to the Web, these new users expected control over style as well as structure.

Cascading style sheets added the ability to control style as well as structure. In particular, CSS gives writers working with HTML (for the Web or for HTML Help) automated styles similar to those in word processors and desktop publishing programs which allow writers to designate a level 1 heading as, for instance, red 24-point Arial type, centered, with 18 points before and 12 points after. After the original style definition, simply adding a “Level 1 Heading” style to text applies seven separate style attributes in a single command. The process is immeasurably more efficient and consistent

For example, consider the following simple style sheet, consisting of less than 10 lines of plain ASCII text:

BODY {background-color: black; font-family: "arial"; font-size: 12pt; color: white; font-weight: bold;}

H1 {font-family: "arial black"; font-size: 24pt; text-align: center; color: red; margin-bottom: 12pt;}

H2 {color: yellow; font-weight: bold;}

DT {color: #FDCB02; font-weight: bold;}

A {color: #F40000;}

.visited {color: #D20000;}

Add this style sheet to the "plain vanilla" Web page above, and you have the following:

(OK, it's a little overdone, but it demonstrates the changes.)

That single cascading style sheet can control one page or an entire project comprising hundreds of pages. The CSS file can be reused for new projects or quickly altered, changing a single line of CSS text so that the red Arial heading becomes blue Bodoni, and the changes in that one file flow to every linked page in the project. In addition, the “cascading” part of “cascading style sheets” means that an HTML page can deal with more than one style sheet. So a company-wide CSS file can control page background and major headings; a series of product-specific CSS files can add color coding that identifies each product in a line; and special CSS files can customize pages for special purposes (such as procedural topics vs. conceptual topics).