Some Examples | Cascading Style Sheets: Designing for the Web (3rd Edition)

Here are some examples of (hypothetical) XML-based formats and their possible style sheets.

The first example could be an electronic program guide. The structure is simple. The guide consists of number of "day" elements, each containing "program" elements, which in turn contain start and end times, the program's name, a short description, a code for programming a video recorder, and some elements that indicate whether the program is in stereo and in wide screen. Consider this code:

 <?xml-stylesheet href="guide.css"?> <guide>   <day>     <date>1 Jan 2000</date>     <program>       <start>06.00</start><end>09.30</end>       <name>Good morning, world!</name>       <description>News, weather, and interviews       </description>       <code>tv://channel2000/20000101T0600-0930</code>       <stereo/>     </program>     <program>       <start>23.40</start><end>01.15</end>       <name>Late(st) news</name>       <description></description>       <code>tv://channel2000/20000101T2340-0115</code>       <stereo/>       <wide/>     </program>   </day> </guide>

The XML starts with a link to a style sheet "guide.css." A simple style sheet to make this readable could be as follows (see Figure 16.1):

 day {display: block} program {display: block} description {display: block} code {display: none /* Don't show the code */} guide {background: black; color: white; padding: 1em} day {font-size: large; margin: 1em 0} program {margin: 1em 2em; text-indent: -2em} start, end {font-weight: bolder} end:before {content: "-"} end:after {content: ". "} name {color: red} stereo:before {content: "stereo "} wide:before {content: "16:9 "} stereo, wide {font-size: small}

Figure 16.1. The "guide" document with the first style sheet.

The information could also be displayed in tabular format: every program is one row and each field is a column (see Figure 16.2).

Figure 16.2. The "guide" document with the second style sheet.

 guide {display: table} day {display: table-body} date {display: caption} program {display: table-row} start, end, name, description, stereo, wide {   display: table-cell} code {display: none} /* Don't show the code */ date {font-size: larger; text-align: left} guide {background: black; color: white} program {vertical-align: baseline} name, description, stereo, wide {padding: 0.5em} start, end {font-weight: bolder} start:after {content: "-"} end:after {content: ". "} name {color: red} stereo:before {content: "stereo "} wide:before {content: "16:9 "} stereo, .wide {font-size: smaller }

For more information on the style properties for tables, see Chapter 17, "Tables."

The next example could be part of a dictionary. The document consists of GLOSS elements, containing HEAD and SENSE elements, the latter in turn containing DEF and EX elements:

 <?xml-stylesheet href="dict.css"?> <dictionary>   <gloss><head>pen</head>     <sense type="n" num="1">       <def>Goose feather used for writing.</def>     </sense>     <sense type="n" num="2">       <def>Fenced area for keeping sheep.</def>       <ex>At night, the sheep are in the pen.</ex>     </sense>   </gloss>   <gloss><head>pen-knife</head>     <sense type="n">       <def>Knife for sharpening pens (1).</def>     </sense>   </gloss> </dictionary>

The style sheet is contained in a file called dict.css. We want every GLOSS to be a block, with the HEAD outdented. The HEAD term will be bold, the definition will be italic. The type of the word ("n" for nouns) will be taken from the attribute and inserted before the definition. If multiple senses exist for a word, there will be a NUM attribute with a number and the style sheet will insert that number before the definition.

 gloss {   display: block;   margin-left: 1em;   text-indent: -1em } head {   font-weight: bold } sense:before {   content: attr(type) ". ">; } sense[num]:before {   content: attr(num) ". " attr(type) ". "; } def {   font-style: italic }

Figure 16.3 shows how this might be rendered. See Chapter 6, "The fundamental objects," for information about the :before pseudo-element and the use of the content property to display the value of an attribute.

Figure 16.3. Possible rendering of a dictionary.

There are two set of rules for the SENSE element. The second one is only used if there is a NUM attribute and, in that case, the value of the content property is taken from this rule instead of the earlier one. The effect is to display both the NUM and TYPE attributes. See Chapter 4 for more information on constructing selectors and on how they determine the precedence of rules.