CSS primer

(Excerpt from "The MathML Handbook" by Pavi Sandhu)

CSS is the most popular way of specifying styles in HTML documents. A CSS stylesheet consists of a set of style rules of the form shown below:

h2 {font-family:"Helvetica"; font-size:16pt}

The effect of this style rule is to display the content of all h2 elements in the document in a 16-point Helvetica font.

Each style rule consists of a selector (such as an element name) followed by a list of properties enclosed in braces. Each property consists of a property name and a value separated by a colon. A semicolon separates different properties in the style rule.

A property name can also be followed by more than one value, with the different values being separated by a comma, as shown below:

h2 { font-family:"Helvetica", "Geneva", sans-serif}

This rule means that the content of an h2 element should be shown in a Helvetica font. If that font is not available, the next value — Geneva — is used. If that font is not available either, then any sans-serif font can be used instead.

You can apply a style rule to multiple elements by separating them with commas. The following rule applies to all h1, h2, and h3 elements:

h1, h2, h3 {color:red}

Referencing a CSS stylesheet

A CSS stylesheet can be referenced in an XML document using a processing instruction, as shown below:

<?xml-stylesheet href="report.css" type="text/css"?>

In the above markup, the href attribute specifies the name and location of the stylesheet, and the type attribute specifies its format.

In an HTML document, the same stylesheet can be specified using a link element:

<link href="report.css" type="text/css">

Including a reference to an external stylesheet is a good practice, since doing so allows documents to be modular and separates information about style and content, in keeping with the spirit of XML. However, in the case of HTML documents, there are two other ways of specifying CSS styles. The first way is to directly embed the stylesheet within the document itself, using a style element, as shown below:

<style>h2 {font-family:"Helvetica"; font-size:16pt}</style>

Alternatively, you can include CSS style rules as the value of the style attribute in any HTML element, as shown here (in this case, the curly braces around the properties are omitted):

<h2 style="font-family:'Helvetica'; font-size:16pt">...</h2>

Style rules specified directly in an element override any other rules that might be specified in an embedded or external stylesheet.

Other types of selectors

The first part of any style rule is a selector. This is an expression that identifies the parts of the document to which the style rule is applied. In the examples shown above, the selector is either a single element name or a list of element names. CSS also provides some other types of selectors for picking out different parts of a document. You can, for example, select elements based on their relationship to other elements or the value of their attributes.

The wildcard character (*) acts as a universal selector. The following rule therefore applies to all elements in the document:

* {color:black; background-color:white}

If one element name is followed by another, the second element must be contained in the first element. The following rule applies only to p elements that are contained in a div element:

div p {display:block}

A > sign is used to specify that one element must be a direct descendant of another. The following rule applies only to p elements that occur as direct children of a div element:

div > p {color:red}

A + sign is used to specify that one element must occur immediately after another. The following rule applies only to tables that immediately follow a paragraph:

para + table {font-size:14pt}

Square brackets are used to select elements with particular attributes or attribute values. The following rule selects all p elements that have the lang attribute specified explicitly:

p[lang] {font-style:italic}

This rule selects only those p elements in which the lang attribute has the value french:

p[lang='french'] {font-style:italic}

You can use the wildcard character along with square brackets to select all elements with a particular attribute. The following rule applies to all elements in the document in which the id attribute is specified:

*[id] {font-family:Courier}

Another important selector uses the keyword first-child to select elements according to the name of their first child element. The following rule causes all elements whose first child is a paragraph element to be shown in a separate block:

p:first-child {display:block}


<< back next >>





Copyright © CHARLES RIVER MEDIA, INC., Massachusetts (USA) 2003
Printing of the online version is permitted exclusively for private use. Otherwise this chapter from the book "The MathML Handbook" is subject to the same provisions as those applicable for the hardcover edition: The work including all its components is protected by copyright. All rights reserved, including reproduction, translation, microfilming as well as storage and processing in electronic systems.

CHARLES RIVER MEDIA, INC., 20 Downer Avenue, Suite 3, Hingham, Massachusetts 02043, United States of America