cascading style sheets (css)

University of Helsinki – Department of Computer Science

Cascading Style Sheets (CSS)

Mika Raento The XML Metalanguage – Cascading Style Sheets (CSS) – p.292/442 2003-09-15


MotivationCSS is useful together with a fairly presentation orienteddocument structure

Simple, but powerful enough for most online publishing

Good tool support



PreliminariesYou should be familiar with CSS1 from the Digital Mediacourse — if you’ve forgotten it you’ll have to recap onyour own. Seehttps://www.cs.helsinki.fi/ i/hahonen/dime02/sisalto/css/ index.html

CSS is not powerful enough to be used together withplain XML as the only presentation step, so I won’t stressthat

But it is useful together with HTML or some otherpresentation oriented markup

XML+XSLT→ HTML+CSS


https://www.cs.helsinki.fi/i/hahonen/dime02/sisalto/css/index.html


Cascading Style Sheets — recapCascading Style Sheets (CSS)

applying style to structured documents withouttransformations

Designed for HTML in 1996

CSS1 W3C Recommendation 1996, CSS2 1998 (CSS3 inprogress)

good browser support, at least when used with HTML,but the browsers do vary in their handling of someconstructs

Separate (but fairly simple) syntax



Changes from CSS1 to CSS2Most important to us (visual):

Different media types (paper, online)

Internalization features

Tables

Relative and absolute positioning

Overflow, clipping and visibility

Mininum/maximum widths and heights

Dynamic border specifications



Changes from CSS1 to CSS2Most important to us (semantic):

Extended selectors

Generated content, counters and automatic numbering,and markers.

New pseudo-classes

Initial value of ’display’ is now ’inline’

Some other minor changes: seehttp://www.w3.org/TR/REC-CSS2/changes.html


http://www.w3.org/TR/REC-CSS2/changes.html


ReferencesBradley ch. 25

CSS2 recommendation athttp://www.w3.org/TR/REC-CSS2/

CSS 2 Tutorial by Miloslav Nic:http://zvon.org/xxl/CSS2Tutorial/General/htmlIntro.html

History at http://www.w3.org/Style/LieBos2e/history/ (ch 20of Cascading Style Sheets, designing for the Web, byHåkon Wium Lie and Bert Bo)


http://www.w3.org/TR/REC-CSS2/

http://zvon.org/xxl/CSS2Tutorial/General/htmlIntro.html

http://www.w3.org/Style/LieBos2e/history/


XML and CSSLinking stylesheets to XML documents:

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

In HTML there is already a certain box and layout model(<P> is block, <EM> inline, <UL><LI> makes a list etc.), soCSS is used to fine-tune

In XML there are no presentation semantics defined, soyou have to build the whole presentation structure fromscratch



Display propertydisplay: block

e.g. paragraphs, headings, images (?)

display: inline

paragraph contents (e.g. a name), character styles (emph,strong)

display: none

element is not displayed, choosing what to display

display: list-item

items in a list



WhitespaceLike HTML

whitespace between elements is removed

line breaks and tabs are converted to spaces andcollapsed

leading and trailing whitespace from blocks is removed

to preserve whitespace, use: ’white-space: pre’



Selector extensions in CSS2book title {...}

descendants of book named title

book > title {...}

children of book named title

title + para {...}

para elements that directly follow title

para: first-child {...}

para element’s first child



Selector extensions in CSS2Selection on attributes

para[security] {...}

attribute security exists in para

para[security="secret"] {...}

attribute security has value ’secret’

para[sources=~ "intelligence"] {...}

one of the words in attribute sources is ’intelligence’

[security="secret"] {...}

any element with attribute security and value ’secret’



Generated contentPre- and suffixes

note:before {content: "NOTE:"; font-weight:

bold; }

note:after { content: "!!!"; }

item_row:after { content: attr(item_code); }



TablesXML:

<?xml version="1.0"?>

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

<order_lines>

<order_line>

<item_code>a1022</item_code>

<item_name>DASD</item_name>

<quantity>2</quantity>

<amount>100</amount>

</order_line>

</order_lines>



TablesCSS:

* { border-collapse: collapse; }

order_lines { margin: 5px; }

order_lines { display: table; }

order_line { display: table-row; }

order_line > * { display: table-cell; }

order_line > * { border: solid black 1px; }



TablesResult:

a1022 DASD 2 100



Document formatting with XSL

Mika Raento The XML Metalanguage – Document formatting with XSL – p.308/442 2003-09-15


MotivationIf you’re producing documents with XML you’ll have todefine their presentation in some way

CSS is probably not powerful enough

Generic programmin languages can be used, but you’llhave to write quite a lot of code to achieve anything

Stylesheets languages are easier and more compact

XSLT is powerful enough and has excellent tool support



Document formattingXML document formatting

CSS (CSS1, CSS2, CSS3)

XSL — XML Stylesheet Language

Other alternatives

Arbitrary processing with programs written withSAX, DOM (or others)

Other available transformation/styling tools (mainlyfrom SGML)



StylesheetsHTML documents

Presentation-oriented markup: certain presentationsemantics predefined (logical definitions, differentbrowsers are allowed to format things differently)

To fine-tune or fix absolutely presentation CSS —Cascading Style Sheets are used, but they cannot expressthe basic semantics

CSS can be used with XML as well, but is too weak formost purposes



StylesheetsSGML

stylesheets are needed to be able to specify howdocuments should be shown or printed

DSSSL (Document Style Semantics and SpecificationLanguage): complex, few tools

Note that DSSSL was not ready yet either when CSS wasdeveloped



StylesheetsXML

Without a style-sheet: no real possible presentation;maybe a generic tree-structure

Stylesheets to control the presentation

XSL, CSS

Many documents can use the same style sheet (like DTD)

The same document can have several stylesheets (e.g. fordifferent formats/audiences (accessibility)/media).



XSLXML Stylesheet Language

Two parts:

XSL (XSL formatting objects, XSL-FO), W3CRecommendation 15 Oct 2001; completepresentation/formatting language

XSLT (XSL Transformations),W3C Recommendation16 Nov 1999; a generic transformation language forXML documents, specifically can be used totransform any XML vocabulary to XSL-FO



XSL Formatting ObjectsA formatting vocabulary: objects and their properties

XML syntax with a DTD (FO DTD):

Block and inline boxes

tables, lists

page formatting(pages/styles/headers/footers/page numbers)

links/references

Each object is a box that can be filled with other boxes ortext (or images)

So the XML document is transformed into another XMLdocument that describes the desired presentation



XSL-FO example<?xml version="1.0" encoding="iso-8859-1"?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">

<fo:layout-master-set>

<fo:simple-page-master page-height="5cm" margin="1cm" page-width="15cm" master-name="my-page">

<fo:region-body />

</fo:simple-page-master>

</fo:layout-master-set>



XSL-FO example<fo:page-sequence master-reference="my-page">

<fo:flow flow-name="xsl-region-body">

<fo:block>

<fo:inline color="red">Hello</fo:inline>,

<fo:inline font-style="italic">world!</fo:inline>

</fo:block>

</fo:flow>

</fo:page-sequence>

</fo:root>



XSL-FO exampleResult:

Hello, world!



XSL-FOThe XSL-processor understands the formatting objectvocabulary and formats the output for the desiredmedium (screen, paper (pdf, rtf))

XSL:FO language is quite verbose and so takes a longtime to write

You’ll want to produce it automatically



XSLT — XSL TransformationsWith XSLT and a XSLT processor you can make arbitratrychanges to the source document:

add prefixes and suffixes

removing, creating and reordering (e.g. sorting)elements

copying elements (using their contents in severallocations)

transform the XML to another XML document (e.g.XSL-FO) or HTML

XSLT is Turing complete(http:// tcl.sfs.uni-tuebingen.de/∼kepser/papers/xsltxq.pdf )


http://tcl.sfs.uni-tuebingen.de/~kepser/papers/xsltxq.pdf


XSLT processorinput: XML document and XSLT style sheet

output: transformed document, can be:

another XML document

e.g. XSL-FO

HTML

text

the transformation is basically built out of templates thatare applied on elements



XSLT template<xsl:template match="note">

<p class="note"><xsl:apply-templates /></p>

</xsl:template>

Two parts:

The pattern to match (e.g. what element to process, inthis case CHAP)

What to do with this element (often recursive, but maybe simpler)



XSLT and XSL-FO togetherXSLT defines how the source XML structure istransformed into an FO structure, that in turn defines thepresentation

<xsl:template match="step|note">

<fo:block space-after="11pt">

<xsl:apply-templates />

</fo:block>

</xsl:template>


University of Helsinki – Department of Computer ScienceApplying a stylesheet to a docu-ment

Add a processing-instruction to the document

<?xml-stylesheet type="text/xsl" href="recipeml.xsl"?>

There are definitions for multiple (alternative) stylesheetsfor a single document but browser support varies (IEbefore 6 is particularly bad — don’t use)

Or you can use a standalone processor like xt(http://www.jclark.com/xml/xt.html)


http://www.jclark.com/xml/xt.html


XSLT syntax

Mika Raento The XML Metalanguage – XSLT syntax – p.325/442 2003-09-15


Root elementAll XSLT documents have

<xsl:stylesheet

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

version="1.0">

as root

Attributes xmlns (namespace), default-space(whitespace handling), indent-result (whether toindent output for better human-readability)



Whitespace and indentation<xsl:strip-space elements="*">

will strip all whitespace between elements (unlessotherwise stated)

the command

<xsl:preserve-space elements="pre poetry"/>

will preserve whitespace in elements pre and poetry

To indent (pretty-print) XML/HTML output, use:<xsl:output indent="yes" />, but note that not allprocessors support this (notably Xalan)



Templatestemplate

Attributes: match (XPath expression identifying the partsmatched with the template (more on XPath later), name(Named templates can be called upon explicitly)

<xsl:template match="em">

<emph><xsl:apply-templates /></emph>

</xsl:template>

matches elements named em and turn them into (HTML)em elements



XPathXPath 1.0 W3C Recommendation Nov 1999,http://www.w3.org/TR/xpath

A language for specifying and selecting parts of XMLdocuments

XPath expressions, e.g. ’list/item’ selects itemchildren of list elements

Used to select parts of the document in XSLT, e.g. in thematch part of a template:

<xsl:template match="dir-div/title">

<h4 class="dir_div"><xsl:apply-templates /></h4>

</xsl:template>


http://www.w3.org/TR/xpath


XPath expressionsDifferent kinds of nodes:

text() selects character data

node() selects any kind of nodes

comment() selects comments

processing-instruction() selects processinginstructions

There are different kinds of expressions for selecting,testing, getting values



XPath: relative paths(There is always a certain context node the paths are from)

item selects item elements

list/item selects the item children of the list elements

list//para selects para descendants of the list elements

* matches any elements

. matches the context node (current element)

.. selects the parent node (so ../title selects the title

child of the parent node)

@author selects the author attribute



XPath: absolute paths/ selects the root (not the document element, but thedocument)

/book selects the book document element

//list selects all list elements in the document

/|* selects the root or any element (more generally ’|’ isor)

id("xref01") selects the element with ID-attribute value’xref01’ (in XPath terminology this is not a location path,but a function call)



XPath: axesThe paths so far shown are really just abbreviated formsof certain axes

Nodes are selected by applying node tests (e.g. names)along this axes, and combining them with ’/’

The axes are:

ancestor, ancestor-or-self

attribute (attribure::type equals @type)

child (default, child::para equals para)

descendant, descendant-or-self



XPath: axesThe axes are:

following (those elements that precede context indocument order, except for direct ancestors anddescendants), preceding (same but before in documentorder)

following-sibling, preceding-sibling

parent (parent::chapter equald ../parent)

self



XPath: predicatesitem[1] locates the first item element

item[last()] locates the last item element

chapter[id("summary")] locates the chapter elementwith an ID attribute value ’summary’

chapter[title="First chapter"] matches a chapter

element, whose title child’s character data is ’FirstChapter’

img[@type="gif"] selects img elements whose type

attribute has value ’gif’



Xpath: predicatesFour basic datatypes: node-sets, strings, booleans andnumbers

Tests between them, even some string manipulation andarithmetic

Location paths return node-sets, these can be convertedto the other types explicitly with string(), boolean(),number() functions (they convert first node of set)

or if node-sets are compared directly with others, it isenough for one node in the set to match the test



XSLT: combining stylesheetsxsl:include brings in the definitions from anotherstylesheet as if they had been written in the includingstylesheet

xsl:import does the same, except that rules in theimporting sheet have higher priority than in theimported sheet; and the import has to be the first child ofthe xsl:stylesheet

both have a href attribute that specifies the file to beincluded



Template precedence (priority)a node may match more than one template (e.g.<xsl:template match="*"> ... <xsl:template

match="para">)

the standard specifies conflict resolution (priority) for this

first only the rules with highest import priority areconsidered

the template may specify a priority with attributepriority

default priorities (simplified): most common patternshave priority 0, more specific match expressions havehigher default priority (0.5) and simpler ones lower (-0.25– -0.5)

for the exact rules, see section 5.5 in the standard(http://www.w3.org/TR/xslt#conflict)

an XSLT processor may report an error if multiple rulesmatch an element and have the same precedence; but isnot required to do so


http://www.w3.org/TR/xslt#conflict


Template priority<xsl:template match="chapter//para">

...</xsl:template>

<xsl:template match="warning//para" priority="2">

...</xsl:template>

Now para elements within warning will match the second tem-

plate; not the first one.



Recursive rulesxsl:apply-templates will recursively match thechildren of the current context

<xsl:template match="ing-div">

<h4 class="ing-div"> <xsl:value-of select="title" /> </h4>

<ul class="ing">

<xsl:apply-templates/>

</ul>

</xsl:template>

attributes: select (which elements to process, may alsobe others than descendants (but note possibility forprocessing loops)), mode (out of scope)



Default templatesAll elements are handled recursively:

<xsl:template match="/|*">

<xsl:apply-templates/>

</xsl:template>

so it is enough to supply templates for those elements you’re

interested in



Default templatesCharacter data and attributes values are copied to thetransformed tree

<xsl:template match="text()|@*">

<xsl:value-of select"."/>

</xsl:template>

(xsl:value-of outputs the character data of the select node)



Default templatesProcessing instructions and comments are ignored:

<xsl:template match="processing-instrucion()|comment()" />



Selecting targets<xsl:template match="/recipes|/recipe">

<html>... <body>...

<xsl:apply-templates select="menu" />

<xsl:apply-templates select="menu/recipe" />

<xsl:apply-templates select="menu/head/authors" />

</body> </html>

</xsl:template>



Selecting targetsOnly process some elements (maybe rest are picked upsomewhere else, or they are not interesting)

structure-based reordering by having severalxsl:apply-templates in the order you want the outputto be in



Comments<xsl:template match="comment()">

<xsl:comment>

Original comment: <xsl:value-of select="."/>

</xsl:comment>

</xsl:template>

Produce comments in output with xsl:comment

select comments in input with comment()



Processing instructions<xsl:template match="style">

<xsl:processing-instruction name="xml-stylesheet">

type="text/css"

href="<xsl:value-of select="." />"

</xsl:processing-instruction>

</xsl:template>

Generate processing instructions withxsl:processing-instruction, match withprocessing-instruction()



SortingXML:

<list>

<item>item 2</item>

<item>item 1</item>

<item>item 3</item>

</list>



SortingXSLT:

<xsl:template match="list">

<UL>

<xsl:apply-templates select="item">

<xsl:sort select="." />

</xsl:apply-templates>

</UL>

</xsl:template>



SortingResult:

<UL>

<LI>item 1</LI>

<LI>item 2</LI>

<LI>item 3</LI>

</UL>

We can apply sorting to xsl:apply-templates and

xsl:for-each, and the sorting can take different sort

orders and several keys.



Automatic numbering<xsl:template match="item">

<LI><xsl:number value="position()"/>

<xsl:apply-templates/></LI>

</xsl:template>

There are attributes on xsl:number for different nested num-

berings, numbering styles etc. The value takes any XPath ex-

pression.



Attribute valuesA shorthand for outputting attribute values in the elementsused in the template is:

<xsl:template match="extref">

<a href="{@url}"><xsl:apply-templates /></a>

</xsl:template>

where the part in the {} is any XPath expression.



More control over output<xsl:element name="IMG">

<xsl:attribute name="href">...</xsl:attribute>

</xsl:element>

Use xsl:element and xsl:attribute to generate anykinds of elements and attributes, e.g. if their name isn’tfixed but depends on the content of the source document



Looping<xsl:template match="menu">

<h2 class="menu">Ruokalista</h2> <ul class="menu">

<xsl:for-each select="recipe">

<li><a><xsl:attribute name="href">#r

<xsl:value-of select="position()"/></xsl:attribute>

<xsl:apply-templates select="head/title"/></a></li>

</xsl:for-each>

</ul> </xsl:template>

Use xsl:for-each when the result has a known regular struc-

ture. The contents of the xsl:for-each work like a template

that gets each of the selected nodes (and you can add sorting).

Useful when using an input element in several placesMika Raento The XML Metalanguage – XSLT syntax – p.354/442 2003-09-15

Conditional processing<xsl:template match="author|inspired-by"><xsl:apply-templates /><xsl:if test="following-sibling::*">, </xsl:if>

--></xsl:template>

E.g. for adding separators between text from input elements.

Note whitespace handling. The test can contain XPath expres-

sions (which are true, if they return any nodes) or boolean op-

erations on text (can be implicitly converted to numbers).


Named templates<xsl:template match="recipe" name="recipe">...</xsl:template>

<xsl:template match="/recipes|/recipe"> ...

<xsl:if test="local-name(.)=’recipes’"> ...

<xsl:apply-templates select="menu" />

<xsl:apply-templates select="menu/recipe" />

<xsl:apply-templates select="menu/head/authors" />

</xsl:if>

<xsl:if test="local-name(.)=’recipe’">

<xsl:call-template name="recipe" />

</xsl:if>

... </xsl:template>



Named templatesUseful when the same template can be used for differentelements/contexts with some parametrization

Use the name attribute to name the template, andxsl:call-template to call it

Introduce the parameters with xsl:param (with optionaldefault value)

Set the parameter values with xsl:with-param in the call

Refer to the parameters with $param_name.



Copying<xsl:template match="h1">

<xsl:copy>Header: <xsl:apply-templates /></xsl:copy>

</xsl:template>

xsl:copy copies the context node. The contents work as a tem-

plate, and you can add attributes with xsl:attribute. Doesn’t

copy children without the xsl:apply-templates, attributes

can be copied with use-attribute-sets attribute.



Copying<xsl:template match="section">

<xsl:copy-of select="title" />

<xsl:copy-of select="author" />

<xsl:apply-templates select="para" />

</xsl:template>

xsl:copy-of copies whole nodes from the source to result.



Additional featuresConditional processing with xsl:choose, xsl:if

XPath functions

variables

modes

See examples from:http://www.cs.helsinki.fi/u/mraento/teaching/xml_s03/examples/http://www.cs.helsinki.fi/group/xmltools


http://www.cs.helsinki.fi/u/mraento/teaching/xml_s03/examples/

http://www.cs.helsinki.fi/group/xmltools


XSLT processor XalanFrom apache project

http://xml.apache.org/xalan/

Excellent conformance to the W3C recommendation

Java and C++ implementations


http://xml.apache.org/xalan/


XSLT processor XTNot very strict (less error reporting than Xalan)

Fast, low memory consumption

Java





This lecture in literatureBradley ch. 13, 17, 22

or

Miloslav Nic: XPath tutorialhttp://www.zvon.org/xxl/XPathTutorial/General/examples.html,XSLT tutorialhttp://www.zvon.org/xxl/XSLTutorial/Books/Book1/index.html

Also recommended are the actual standards; James Clarkhas done an excellent job in producing clear andunderstandable definitions for both XPath and XSLT


http://www.zvon.org/xxl/XPathTutorial/General/examples.html

http://www.zvon.org/xxl/XSLTutorial/Books/Book1/index.html

cascading style sheets (css)

Documents