# Connexions

You are here: Home » Content » Displaying XML with CSS

### Lenses

What is a lens?

#### Definition of a lens

##### Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

##### What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

##### Who can create a lens?

Any individual member, a community, or a respected organization.

##### What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

#### In these lenses

• CSS

This module is included inLens: CSS - Cascading Style Sheets
By: Hannes Hirzel

"Example which shows how to style an XML document with CSS"

Click the "CSS" link to see all content selected in this lens.

Click the tag icon to display tags associated with this content.

### Recently Viewed

This feature requires Javascript to be enabled.

### Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.

# Displaying XML with CSS

Module by: Hannes Hirzel. E-mail the authorEdited By: Hannes HirzelTranslated By: Hannes Hirzel

Summary: An introduction to styling XML with CSS

## Displaying XML with CSS

An XML document contains data tagged in XML. This means that the tagging respects the syntax of well-formed XML. Good names for the tags allow a human reader to more easily understand the information contained in the XML document. The tags preferrably describe the content of the data.

For example a text string like 'Scriabin' does not say much to most people. But if an XML document identifies it as an element <name> Scriabin </name>, then you know that a name is encoded. And if we see the following code snippet:

  Skrjabin 

it is clear that this is the name of a composer. By applying these tags to mark raw data a text string is converted to a piece of information -- the name of a composer.

We would like to present this piece of information on the screen in a user friendly format, without tags so that it is easy to read. We can do this by developing and writing a program, called a stylesheet .

A style sheet is a file containing a set of instructions on how the elements of an XML document should be formatted and presented. Here we look at a specific language for styles named -- Cascading Style Sheets -- abbreviated CSS. This language can be used to describe how you want the contents of an XML document to be presented in a browser. Let us expand our XML code snippet a bit to serve as an example.

  Wolfgang Amadeus Mozart Violinkoncert Nr.3 G-dur Berliner Philharmoniker Herbert von Karajan Anne-Sophie Mutter DGG 1978 

This code could be part of a CD online catalog. We would like now to present this information to a customer:

Berliner Philharmoniker

Herbert von Karajan

Anne-Sophie Mutter

DGG 1978

### Styling with CSS

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.

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

  Wolfgang Amadeus Mozart Violinkoncert Nr.3 G-dur Berliner Philharmoniker Herbert von Karajan Anne-Sophie Mutter DGG 1978 

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

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

## Content actions

PDF | EPUB (?)

### What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

#### Definition of a lens

##### Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

##### What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

##### Who can create a lens?

Any individual member, a community, or a respected organization.

##### What are tags?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks