James Powell, Virginia Polytechnic Institute & State University
Copyright © 1997
HTML is at a crossroads. Under pressure from HTML authors and vendors such as Netscape and Microsoft, some dialects of HTML include formatting tags. But HTML was not intended to be a formatting language. Like other SGML markup languages, HTML's purpose is to capture structure, utilizing an external mechanism to control presentation (a style sheet). This mechanism has been built into web browsers in the form of default and user configurable renderings for various headings and other markup. But many developers have lost sight of this and that is why Netscape Navigator supports tags like <FONT> and <CENTER>. Since Internet standards are developed by committees, they evolve slowly. But finally a standard is emerging for applying an external presentation mechanism to HTML. That mechanism is called cascading style sheets (CSS).
The HTML 3 cascading style sheet mechanism acknowledges and maintains support for user-configurable presentation options, browser options and author-specified formatting. All such options are merged by the browser rather than ignored, thus achieving the cascading effect to which the standard's name refers. Style sheets can be incorporated into HTML documents or placed on the web as separate, addressable documents that can be linked to by others. Different style sheets can be applied to the same document to achieve dramatically different effects. For example, a publisher might provide a large print edition style sheet that, when applied to an issue of their electronic magazine, instantly enlarges all typefaces in the document. There would be no need for multiple versions of each issue, one incorporating different <FONT> and <BASEFONT> markup to enlarge type, another for readers without visual impairments. Style sheets could be revised and all documents referring to them would instantly use the new presentation specifications. CSS provides unparalleled flexibility for formatting impossible with specific markup extensions to HTML.
CSS supports an inheritance of formatting styles through a cascading style mechanism, and it also supports style inheritance when styles are applied to document structures. Every element within a document section inherits the specified style properties. Style properties are formatting specifications such as typeface, font size and color. A style specified for the <BODY> tag will be applied to all HTML elements within the body of the document, unless other style properties are specified for a particular element. Style properties specified within the <STYLE> element in the document header take precedence over other formatting options and are only overridden by style options selected by the reader with their own web browser.
Figure 14-1 Hierarchy of Style Sheet inheritance.
User options override all others.
Style sheets are composed of a simple text-based language used
to relate HTML tags to style sheet formatting options, which
are in turn paired with user-specified values. They can
exist as separate files linked to the HTML 3 document using a
<LINK> tag in the document header, e.g.
<HEAD> <TITLE>A Document</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="http://server.edu/style"> </HEAD>or be embedded in the header portion of an HTML document with a <STYLE> tag. HTML 3 uses a cascading style mechanism where the user's local web browser settings for a given tag override all other settings. If a browser supports style sheets, then style sheet settings override the default renderings for a given tag, and the default renderings apply only if local customizations and style sheets are not present. This implementation provides complete backwards compatibility with HTML 2 while allowing authors to gain much greater control over the presentation of their documents.
Style sheets are usually created by the document author. They relate HTML tags with style properties in such a way that the local software can decide how exactly to display the information using these properties as hints. This allows browsers with certain limitations such as small screen size, limited font set or lack of graphics support to ignore or substitute the requested rendering with an approximation. For example, if the style sheet says to use a 12 point Palatino font for the text in the body of a document and Palatino is not an option on the remote system, then the web browser can substitute Times-Roman at the specified font size. Another nice feature of style sheets is the ability to use multiple style sheets. You may find a style sheet on the web that does almost everything you want (font style and sizes for various tags) but you can change one or two options such as select an especially large font size for level 1 headings and otherwise hand over control of the presentation to the other style sheet.
Style sheet syntax is simple. Each tag and/or class that an author wishes to specify presentation information for is listed in the style sheet followed by a pair of curly brackets ({}). In CSS, element and class names are also referred to as selectors. A subclassed element should be listed with a period dividing the tag name from the subclass name. The selector is followed by the type of presentation, also referred to as a property (align, color, margin, font or indent), followed by colon (:) and an appropriate value for the presentation type. Property names are indicated by class and specific type by placing a dash between the property and its specific type name, e.g. font-size for font size, font-family for typeface, margin-right for right margin, etc. (a complete list of level 1 CSS style property names and example values is provided at the end of this chapter).
Here is a style example that sets font, color and
alignment options for a level 1 heading:
H1 {
text-align: center
color: #ffggee
font-family: times
font-size: 36pt
}
HTML elements are specified first on the line in upper or lower
case. Brackets ("<>") should not be used
around selectors since style sheets can be embedded in an HTML
document and this might confuse some browsers into thinking they
have encountered the document body. Multiple selectors can be
listed on one line separated by commas:
h1, h2, h3 {text-align: center}
Style sheet selectors can include a class name, to specify that
the properties be applied to only one class of HTML
elements:
h1.big {font-size: 48pt}
Selectors can also be grouped on one line:
h1 {text-align: center; color: #ffggee; font-family: times; font-size: 36pt}
to specify multiple properties for one selector or selector class.
Style sheets can become quite complex, so it is helpful to include
comments. A comment can occur on a line by itself or following a
style sheet entry. It should be surrounded by slash asterisk pairs:
h1.big {font-size: 48pt} /* 48 pt is big enough */
At this point you can add more entries to control more aspects of
the page presentation, or insert a URL pointing to another style
sheet to be used. If the style information is embedded in the
HTML 3 document header, it should be within the <STYLE>
start and end tag. Styles can be specified in the document body
with the STYLE attribute:
<P STYLE="font-family: times">Styles can also be in separate documents; this is especially useful if the style will be used by many documents, although it can slightly slow down document display. Locally defined styles take precedence over items redefined in an external style sheet.
Styles can be applied more specifically than with every occurrence
of a given tag. You can define a class for a tag within an HTML
document using the CLASS attribute, and then refer to that
class in a style sheet. Each tag of that class within the document
will be presented using the style you have defined for that class:
<STYLE>
H1.banner {font-size: 48pt}
</STYLE>
</HEAD>
<H1 CLASS="banner">Got your attention!</H1>
Level 1 headings not of the banner class will not be displayed
using the banner style. If you want to make global definitions,
use the HTML tag to indicate all document contents should default
to this style:
HTML {font-family: helvetica}
If a style is specified for an HTML element, all subclassed elements
of that type will also assume the style unless a separate style is
defined for the subclass. For example, if a division style is
established that sets font-family to times-roman,
and this division includes several paragraphs, those paragraphs
will use the Times-Roman font. Thus cascading takes place even
between style sheet elements, using the topmost structure's style:
DIV {font-family: times-roman}
unless there is a style property for the embedded element:
P {font-family: helvetica}
in which case Helvetica would be used within paragraphs even if they
appear inside divisions that have their font-family defined
to be times-roman.
Perhaps most the most powerful feature of styles is the ability to
specify context sensitive styles. You can list tag pairs without
commas to specify context. For example, if the document is a
scientific article and the first paragraph is always an abstract, the
following style entry would assign a font family of Helvetica to this
paragraph:
H1 P {font-family: helvetica}
Styles are a new, somewhat complex and still evolving addition to HTML 3. They are a potential worksaver when used instead of specific markup to control document formatting. Organizations and multiple authors could all use the same style sheet to achieve a good deal of uniformity between documents without encoding style information into their texts. Style sheets could be copied and then tailored to suit local needs much like web page sources are captured and perused to discover the tricks used to achieve special effects in previous versions of HTML. Style sheets will do for publishing content to the web what Netscape extensions have done for the home page, make documents much more professional, attractive, customizable and easy to read from one type of computer system to another.
This chapter only covers CSS Level 1. Level 2 is currently under development. It will include support for specifying style properties for different output devices such as ultra high color, high resolution displays and low resolution output such as paper, speech or Braille rendering. Plans are to support text block border styles, page style properties, list, table and math styles.
In the last chapter we created a page for the fictional LavaLand Tours company. The markup for this page included a number of hooks for style sheet entries, in the form of element subclasses. Some subclasses are named for the type of content their class element marks (e.g. <DIV CLASS="introduction">), to make them reusable. Others are simply named for a type of formatting (e.g. <I CLASS= "largeitalics"> ). Now we are going to use these element classes to create a CSS style sheet that will be applied to the LavaLand home page.
Source for the LavaLand brochure style sheet: lavaland.css
| Property | Description | Values |
| font-size | typeface size | font size in points e.g. 12pt, percent or: xx-small | x-small | small | medium | large | x-large | |
| font-family | typeface | font family names such as times-roman |
| font-weight | density | extra-light, light, demi-light, medium, normal, demi-bold, bold, extra-bold, -3, -2, -1, 0, 1, 2, 3 |
| font-style | style of typeface | italic, italics, roman, oblique, upright, small-caps, normal |
| line-height | distance between baselines | length (number) or percent e.g. 25% |
| font | shorthand for size [leading] family [weight][style] | valid settings for these properties e.g. 16pt helvetica bold |
| color | modifies color of various elements | color name or RGB value e.g. #rrggbb |
| background | background image | URL such as "http://server/images/bricks.gif" |
| bg-blend-direction | blends two background colors | Shorthand for ompass directions e.g. N | NW | W | SW | S | SE | E | NE |
| bg-style | background image layout | repeat | repeat-x | repeat-y | no-repeat | scroll | fixed |
| bg-position | initial position of background image | percentage e.g. 50% |
| word-spacing | space between words | percentage e.g. 50% |
| letter-spacing | spacing between letters | length (number) |
| text-decoration | text formatting options | underline, overline, line-through, box, blink |
| vertical-align | vertical position of an element | percent or baseline | sub | super | top | text-top | middle | bottom | text-bottom |
| text-transform | transformation of first character of a word or entire word(s) | capitalize, uppercase, lowercase, none |
| text-align | local text alignment | left, right, center or justify |
| text-indent | indent text | length or percent |
| padding | space between borders and contents | length, percent (can specify up to four values corresponding to top, right, bottom and left) |
| margin-left | size of left margin | in em units e.g. 3 em (an em is half the size of the letter 'M') |
| margin-right | size of right margin | in em units e.g. 3 em |
| margin-top | size of top margin | in em units, e.g. 4 em |
| margin-bottom | size of bottom margin | in em units, e.g. 4 em |
| margin | shorthand for margin-top, right, bottom, left respectively | in em units, e.g. 4em, 3 em, 4 em, 3 em |
| display | turns display of element on or off | block, inline, none |
| width | width of an element | number or percent |
| height | height of an element | number, auto, from-canvas |
| float | image positioning | left, right none |
| clear | does element allow images to float with it? | none, left, right both |
| pack | packing of element boxes | tight or loose |
| border-style, border-style-internal | border styles for margins, tables, etc | none | dotted | single | double | thin-thick | thick-thin | beveled | raised (can specify up to four values corresponding to top, right, bottom and left) |
| border-width, border-width-internal | border width | number or thin | medium | thick (can specify up to four values corresponding to top, right, bottom and left) |
| border-color, border-color-internal | border color | color name or RGB value e.g. #rrggbb |
| list-style | list item styles | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none or URL of bullet image |
| magnification | enlargement value for elements | number |
| white-space | whether extra white space inside a block should be ignored or retained | normal or pre (for preformatted style) |