A stylesheet in CSS consists of one or more rules . A rule in CSS must be well formed. It must observe the special syntax governing CSS. Every rule defines how one or more elements in a related XML document should be presented. Figure 3 gives an example:

composer
{	
	display:block;
	font-weight: bold;
	font-size:16pt;
}

The first element in a rule indicated the selector . A selector specifies the name of the element in the XML document which is to be formatted, in this case 'composer'. The contents of the rule, the instructions on what to do with the item is enclosed in curly brackets - an opening one { and a closing one }. This content is also called a declaration block as it consists of one or more declarations or - perhaps more informative - with instructions how to format the XML element.

An declaration (or instruction) in a rule consists of an attribute and a value . Attribute and value are separated by a colon and the entire instruction is terminated by a semicolon.

With the attribute you specify the type of formatting you want to achieve and the value indicates how the formatting will be implemented. For the rule above this means

1: display : block; insert line breaks before and after the element's contents

2: font-weight : bold; put the content in bold face

3: font-size: 16pt; set the font size to 16

With this rule we get in other words that the name of the composer of should be put in bold with a line break before and after the text. Please note that the rule usually applies to the entire contents of the element composer, so we need no rule for the name element there..

One can in a selector also list several elements which must be formatted the same way, as indicated in the next rule:

orchestra, conductor, soloist
{	
	display:block;
	font-size:12pt;
}

This rule will format the content of elements orchestra, conductor, soloist from the instructions specified in the declaration block: there must be a line break in before and after each element and the content of all elements must be written with a font size of 12, just as in the example above. Note that we do not need to specify that the elements are placed in the element construction.

There are many ways to vary your presentation. One among several is to specify a particular color of the font. Another version of the first rule:

composer
{	
	display: block;
	font-weight: bold;
	font-size: 16pt;
        color: red;
}

will result in the name of the composer written in red letters, and an extension of the second rule

orchestra, performer, soloist
{	
	display: block;
	font-size:12pt;
        color: blue;
}

will cause the text in the listed items appear in blue text.

CSS is an efficient language that is reasonably easy to work with. It does have certain disadvantages that you should be aware of. If you want to know more about CSS, you can have a look at the specification: www.w3.org/TR/REC-CSS1. This is for the first level, there is a second one and the third is being worked on.

Linking XML and CSS

For XML and CSS to work together, you must put a link from the XML document to the style sheet. Then the browser can interpret the formatting rules of the style sheet and apply them to the XML document. The little example describing a CD is then

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="cd_onlinecatalog.css"?>
<cd>
	<composer>Wolfgang Amadeus Mozart</composer>
	<composition>	Violinkoncert Nr.3 G-dur	</composition>
	<entry>
		<orchestra>Berliner Philharmoniker</orchestra>
		<performer>Herbert von Karajan</performer>
		<soloist>Anne-Sophie Mutter</soloist>
	</entry>
	<recording>DGG 1978</recording>
</cd>

As shown, a prologue has been added in which we (1) declare the version of XML used and the encoding to be used, and (2) create a link to the style sheet to be used:

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

The CSS file is a text file which is indicated by the 'type' attribute. We indicate the path and the name of the file . In this case, the XML document and the CSS style sheet are in the same folder. If we click on the XML document it is opened in the default browser and gives the following result

Further reading

If you like to know more about the different forms of applying styles with CSS and how to use CSS with HTML, you might want to read www.w3.org/MarkUp/Guide/Style (basic introduction), www.w3.org/Style/CSS/learning (commented links), How to add style to XML or the short XML tutorial in the CSS2.1 specification.

The classical book on CSS

Hakon Wium Lie, Bert Bos, Cascading Style Sheets, Designing for the Web (3rd Edition), Addison-Wesley, 2005