Introducing Cascading Style Sheets

This topic is an introduction to Cascading Style Sheets technology, and is aimed at people migrating from a Microsoft®Word®-based style paradigm to an HTML-based style paradigm.

Overview

Cascading Style Sheets (CSS) is a technology used primarily within Web publishing that aims to manage the presentation of HTML pages. CSS is essentially a styling language. CSS code instructs a browser how to "render" (display) HTML elements. For example, a CSS definition may instruct the browser to display Heading 1 elements in Tahoma 14pt bold with a green border above the paragraph.

CSS instructions can be included inside an individual HTML element (eg, <h1 style="font-family: Tahoma">), in a style section at the top of an HTML page, or in an external file (eg, abc.css) referenced at the top of an HTML page. The external style sheet method is the most efficient, and the most appropriate for documentation and HTML-based Help systems.

Relationship to HTML

CSS is an entirely separate language to HTML, but works in conjunction with HTML (and other XML-based markup languages).

An example will help illustrate the relationship.

In HTML, a heading followed by a paragraph may be coded as follows.

<h1>Important Note</h1>
<p>Do not press the red button.</p>

Without any styling information, a browser will display this code by rendering the heading in a large bold font, and the paragraph in a smaller Roman font.

A CSS instruction to format h1 elements and p elements in the HTML might look like the following:

h1 {
			font-family: Tahoma;
  	color: #00000E;
   margin-left: 10px;
}
p {
   font-size: 10px;
}

The CSS instruction will be applied consistently and globally to every h1 and every p element in the HTML code. The look and feel of HTML pages can therefore be changed quickly and efficiently by simply changing the CSS instruction. If the external CSS file approach is used, one style sheet can be referenced by thousands of HTML pages. All h1 elements, for example, could therefore be controlled through one style instruction.

The Cascade

The C in CSS stands for "cascading". This refers to the way that styling is inherited. HTML elements follow a hierarchical structure. For example, a bulleted list has the following markup:

<ul>
  <li>dog</li>
  <li>cat<li>
  <li>goldfish</li>
</ul>

The list items (li elements) are nested within the unordered list (ul element). If a CSS instruction is specified for a ul element, that instruction will be inherited by (or "cascades down" to) the li element. Likewise, instructions for the body tag t(hat surrounds all page content) will cascade down to all subordinate elements. An instruction at a lower level (for example, for the li element in our example above) will override the higher level instruction. So if a ul is instructed to be in the Arial typeface, but the li is instructed to be in the Tahoma typeface, the li instruction wins out.

Differences to Page Layout Formatting

Word is a "page layout" editng tool, not an online document editor. Although it has some HTML support (notably, its Save As HTML feature), it is a very poor Web editor. One of the reasons why it is poor at HTML is because it is good at page layout. Page layout software is built around fixed page sizes. A picture 6 cm placed on an A4 page might be 5 cm from the left edge of the page, and 10 cm from the right edge. This is possible because an A4 page is always 21 cm wide. Web pages have no fixed size. There is no "A4" or "Letter" size on the Web. There is an entirely different set of size rules, based not on physical fixed measurements like centimetres and inches, but on pixels, percentages and relative sizes.

HTML is specifically designed to be accessible to people with different eyesight, different monitors, different window sizes, different operating systems, different browsers, different colour preferences, and different hardware. HTML can be read by blind people, can be read on PDAs, on mobile phones, on TV screens, and on personal computers of every size, brand, shape and colour. Page layout rules cannot be applied in this multiple delivery media environment.

Word-based Help Authoring Tools like RoboHelp Word have had to use ingenious approaches to turn Word-base page layout formatting into topic-based HTML formatting. To make this work, many compromises were made. In particular, the ideal of using external CSS instructions was abandonned. The bigger ideal of separating content from formatting was also compromised. RoboHelp Word does not produce high quality HTML, and its HTML does not conform to accessibility ideals. (Web accessibility is now mandated by US Federal law, and by United Nations conventions.)

Conclusion

CSS is a powerful technology designed for Web-based content, and is most commonly used in conjunction with HTML. Styling HTML with CSS employs a different paradigm to page layout software such as Microsoft Word. CSS is built around the concept of separation of content and form.