Cascading Style Sheets - Part I

Our design philosophy is simple - we would like to separate content from style. The file that has the content will only have structural markup tags. There will be a separate file that will have the formatting instructions.

The stylesheet or file must have a .css extension. It is a text file made out of rules and comments. To include this file in our xhtml document we will put a link to it in the head section of the xhtml document like so:

<link rel = "stylesheet" type = "text/css"
	 href = "./style.css" media = "all" />

You may also import a pre-existing style sheet and override a couple of rules. Supposing you agree to every style rule in a style sheet but would like to make the h1 header gray, you would do the following:

<style type = "text/css" >
    @import url("./style.css");
    h1 {color: gray;}
</style>

CSS Elements

The style specification is applied to elements. There are various ways of categorizing elements:

Replaced Elements
The contents of these elements are replaced by something else when it is rendered by the browser - like img or radio buttons in a form.
Nonreplaced Elements
The contents of these elements are rendered by the browser like p.
Block-level Elements
Block-level elements generate an element box that fills its parent element's content area and cannot have other elements at its sides. It generates breaks before and after the element box like p and div.
Inline-level Elements
Inline-elements generate a box within a line of text. They do not generate a break and can appear within the content of another element like span.

Structure of Style Sheet

A style sheet is made up of comments and rules. Comments can be included like regular C style comments: /* ... */. Rules on the other hand have the following structure:

Selector {property1: value1; ... propertyn: valuen;}

A selector could be elements that we have already seen or we could define a separate class that we can apply to several elements. We could even have multiple selectors for a rule. Like:

Selector1, Selector2, .. {prop1: val1; ... propn: valn;}

One way of defining common style rules is to group them into a class and identify which elements they apply to. For example, if I wanted to make the header or the paragraph red if it were important but not otherwise I would do:

h1.important, p.important {color: red;}

To use this style for a particular header, the markup would look like:

<h1 class = "important"> ... </h1>

To apply the same class to all elements the asterisk symbol is used as a wildcard in the rule definition.

*.important {color: red;}

There are also id selectors. An id selector is a unique identifier and must occur only once in the xhtml document, whereas the class style maybe used several times.

In the XHTML document:
<h1 id = "veryImportant"> ... </h1>

In the Style Sheet:
#veryImportant {background: black; color: red;}

Document Structure

There is a structure to each xhtml document. Each of the xhtml elements can be represented by the nodes in a tree. Every element is either a child or a parent element or both. We say there is parent-child relation if the difference in the levels is one. However, if the difference in the levels is one or more the relationship is called ancestor-descendant. Let us examine this document and derive its structure.

Cascading style sheets allows the user to define descendant selectors and even combine them:

h1 em, p strong {color: purple;}

Notice the absence of commas between ancestors and descendants. To select children use the following syntax:

h1 > strong {color: red;}

Adjacent siblings can also be selected. The following rule states: select a paragraph that immediately follows a header and remove the top margin.

h1 + p {margin-top: 0;}

Why Cascading?

Why the term cascading style sheets? One can include (import) several style sheets within an xhtml document. The rules are combined. Conflicting rules are resolved. Combining and resolving conflicting rules is the process that is called cascading. The conditions by each conflicting rules are resolved are not in themselves very complicated but are beyond the scope of our discussion.

Values and Units

CSS has two types of numbers integers and reals. You can also express numbers as percentages, but the percent (%) sign have to be used.

There are 17 named colors - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. There is an extension of about 140 named colors but not all browsers render them correctly.

Colors can also be expressed in the rgb scale using integers from 0 to 255 for each of the red, green, and blue components. Another way of expressing colors is to use the hexadecimal notation. The color white is expressed in three ways:

color: white;
color: rgb(255, 255, 255);
color: #FFFFFF;

Length units can be absolute or relative. Absolute length units are:

Working with absolute units is difficult, since the author of a document has very little idea of the size of the browser window and the resolution. Relative units are better. There are 3 of them:

Fonts

The CSS defines five generic font families:

To specify a font family give the font names but end the list with the generic family name. Use quotation marks to include fonts that are made up of more than one word.

h1 {font-family: Times, 'Times New Roman', Georgia, 'New York', serif;}

Fonts can be given weight through the property font-weight. The font weights are: lighter | normal | bold | bolder. The default font-weight is normal.

The font sizes can be expressed in pixels or in relative units. The property font-size has the relative values: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger. The default value for font-size is medium.

You can also assign a style to a fonts through the property font-style. The values are - italic | oblique | normal. The default is normal. Most browsers do not make much difference between italic and oblique.

There are some variations that you can also include using the property font-variant. The values for this property are - small-caps | normal.

Now all of these properties and values can be combined into one property called font. You have to remember to list the values in the proper order:

font: <font-style> <font-variant> <font-weight>
      <font-size> <font-family>

Text Properties

You can indent your paragraphs using the property text-indent. You can give the amount of indentation in em or px. Negative indentations are allowed. This will give the appearance of an overhang. Use negative indentations with care.

p {text-indent: 2 em}

Horizontal alignment is achieved through the property text-align. The values are - left | center | right | justify. There are several options for vertical alignment. You can set the property for line-height. The line-height refers to the distance between the baselines of lines of text. The line-height can be changed in length units or percentages of the font size. The property vertical-align repositions text. The default value is baseline. The other values that are commonly used are - sub | super.

The word spacing can be changed through the property word-spacing. The default value is normal. Other spacing values are expressed in length units. Similarly letter-spacing can also be changed using the property letter-spacing using length units. You want to do this with care if you want to achieve any special effect.

The text can be transformed in several ways like making everything in upper or lower case. The property is text-transform. Under normal circumstances it has the value none. The other values are - uppercase | lowercase | capitalize. capitalize only capitalizes the first letter of each word.

You may also add decorations to your text. You can underline, strike through, overline, or make the words blink ( DONT ). The property is text-decoration and the values are - none | underline | overline | line-through | blink.

The browser collapses white space between words to a single space. If you want to control how white space is rendered there is a property called white-space. The default value is normal. The others are: