Department of Computer Science Institute for System Architecture, Chair for Computer Networks

eXtensible Stylesheet
Language and Cascading
Style Sheets
 Scenario of document generation

Data representation Data extraction Transfer Interpretation

id name first name title room

1 Hawking Stephen Professor 42
2 Newton Isaac Sir 43 Transformation
3 Kepler Johannes Professor 71
… … … … … (X)HTML/
HTML5
+ CSS

Web server

Content + Style / Layout = Presentation

information

2
 Layer Model

• The progression can be viewed as layer model

• Data inside Storage Layer is extracted and forwarded to the
user after transformation to presentation format through
processing layer

Presentation Layer Browser Mobile Browser Feed Reader Document reader …

(X)HTML HTML5 RDF Atom DocBook ...

Processing Layer
Logic Style sheets

eXtensible Markup Language

Storage Layer
RDBMS XML Repository File System ...

3
 Extensible Stylesheet Language

• The eXtensible Stylesheet Language (XSL) is a set of W3C

recommendations for XML transformation and presentation
that is widely used to generate arbitrary documents
• By definition it consists out of:
1. XML Path Language (XPath)
an expression language for addressing parts of an XML
document
2. XSL Transformations (XSLT)
a language for transforming one XML representation to
another Not covered in this
3. XSL Formatting Objects (XSL-FO) lecture
an XML vocabulary for specifying formatting semantics

Processing Layer
XSLT-, XSL-FO-Processors, XPath,… XSL stylesheets

Used as integrative
eXtensible Markup Language
data representation

4
 XML Path Language (XPath)

• The XML Path Language is a non-XML syntax for addressing

parts of an XML document
• To navigate in XML trees and select nodes or sets of nodes it
uses path expressions
• A location step consists out of three parts:
Step = AxisName '::' NodeTest '[' Expression ']'
specifies the tree
relationship between the specifies the node zero or more predicates,
nodes selected by the type which use arbitrary
location step and the expressions to further
context node (e.g. “child”, refine the set of nodes
“parent”, “attribute”, selected by the location
“self”) step

Examples:
• child::person[child::name]  all children of type “person”
which have a child of type “name”
• /descendant::person[position()=23]  selects the twenty third
person in the document (absolute location path) 5
 XML Path Language

• Beside the expanded syntax there exists an abbreviated form

• Some important abbreviated location path expressions are:

nodename Selects all child nodes of the node of type “title” selects all child
‘nodename’ elements “title”

nodename1/nodename2 Selects children of ‘nodename1’ which “document/title” selects all

have type ‘nodename2’ “title” child nodes of
“document” elements
../nodename Selects children of the parent of the “../title” moves to the
current node parent of the current node
and selects its child
element “title”
nodename/@attr Selects the attribute ‘attr’ of the children “document/@id” selects
of type “nodename” the attribute “id” of the
element “document”
. Selects the current node ---

.//nodename Selects all element nodes of type “.//title” selects all

‘nodename’ that are successors of the elements “title” that are
current node (located in an arbitrary depth successors of the current
of the XML tree) node (e.g. “document”)

* Selects all children of the current node ---

/path ‘/’ introduces an absolute path (root-node) ---

6
XML Path Language
XPointer
XQuery XLink
XPath
• XPath is the conceptual basis of
further W3C specifications: XSLT
– XQuery
Language for querying for information in XML documents
Example: fn:count(//book)  Counts all elements “book” in an XML file

– XML Pointer Language (XPointer)

Language for pointing to specific parts of an XML document
Example: xlink:href="list.xml#element(/1/2)"
 Selects the second child element of the root element (= the first element)
in the file ‘list.xml’

– XML Linking Language (XLink)

Language for creating hyperlinks in an XML document
Example: <anchor xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:type="simple"
xlink:href="http://www.w3.org/list.xml#id('msc').child(5,item)">
text</anchor>
 Defines a simple link that points via XPointer to the fifth item in a list
with a unique id of “msc” in the file list.xml located at www.w3.org 7
XSL Transformation (XSLT)

• XSLT is an XML based language used for transforming one

XML tree to another XML tree (or another text based
representation)
• It is based on a separation of content and style of the
resulting tree:
– Content is available as XML data
– Style is available as an XSLT stylesheet file (valid XML)
• An XSLT processor takes the XML data as input and
generates the output file whose structure is described in the
XSLT stylesheet

XML
Input file
XSLT XML
Processor Output file
XSLT
declarations
(stylesheet)

8
XSL Transformation

• There exist two main areas of application for XSLT:

1. Communication Oriented Transformation
• XML output file is a format for machine
communication
• Often used in the context of Message Oriented
Middleware or Service Oriented Architectures
• One common target format is the SOAP protocol:

Service Requestor
Service Provider
XML SOAP
XSLT Network Service
data envelope
SOAP
style

2. Presentation Oriented Publishing (POP)

Output format is generated for purpose of presentation
(e.g. as PDF or Website)
 Content of this lecture 9
 XSL Transformation

• The XSLT stylesheet is a collection of templates

• Each template defines which actions (e.g. generating XML
tags) are performed if a particular node is examined
• The XML source tree is processed recursively beginning with
the root node
• If the processing order is not changed explicitly the children
of the current node are traversed from left to right
• XSLT uses XPath to specify nodes (e.g. by ‘match’ or ‘select’)

root node root node

transformation
document html

title chapter chapter head body

text title h1 p p h1 p
title paragraph paragraph title paragraph
text text text text text text
text text text text text

source tree result (XHTML) tree

10
 XSL Transformation
• Particular template is processed by ‘apply-templates’-instruction
that results in a new set of selected nodes:

<xsl:apply-templates select="chapter"/>
...
<xsl:template match="chapter">
<html:h1>
<xsl:value-of select="title"/>
</html:h1>
<xsl:value-of select="paragraph"/>
</template>
...

root node root node

transformation
document html

title chapter chapter head body

text title h1 p p h1 p
title paragraph paragraph title paragraph
text text text text text text
text text text text text

source tree result (XHTML) tree

11
 XSL Transformation example
<?xml version="1.0" ?>
<staff>
<staffMember>
<name>Hawking</name>
<firstname>Stephen</firstname>
<title>Professor</title>
<room>42</room>
</staffMember>
<staffMember>
<name>Newton</name>
<firstname>Isaac</firstname>
<title>Sir</title>
<room>43</room>
</staffMember>
</staff>
<xsl:template match="staff">
<table><xsl:apply-templates/></table>
</xsl:template>
<xsl:template match="staffMember">
<tr><xsl:apply-templates/></tr>
</xsl:template>
<xsl:template match="name">
+ <td><xsl:value-of select=". "/></td>
</xsl:template>
<xsl:template match="firstname">
<td><xsl:value-of select="."/></td>
</xsl:template>
<xsl:template match="title">
...

<table>
<tr>
<td>Hawking</td><td>Stephen</td>
<td>Professor</td><td>42</td>
</tr>
<tr>
<td>Newton</td><td>Isaac</td>
<td>Sir</td><td>43</td>
</tr>
</table> 12
 XSLT language constructs

• Beside the simple template mechanism XSLT features many

powerful language constructs making it an expressive programming
language
• Some of these constructs are:
– <xsl:for-each select=“XPath expression”>
• Selects every XML element of a specified node-set
– <xsl:if test=“XPath expression”>
• Puts a conditional test against the content of the XML file
– <xsl:sort select=“XPath expression”/>
• Selected nodes can be sorted in alphabetical or numeric
order
– <xsl:variable name=“somename” select=“XPath expression”/>
• Declares a variable which is initialised with the value
specified by the XPath expression and can be accessed by
$somename

13
XHTML generation

• An often used application of XSLT is the generation of

XHTML documents
• By this a website can be generated dynamically out of XML
content and thus be adapted to the characteristics of a
requesting client
• In contrast to the XSLT stylesheet, which describes the
resulting XHTML tree, Cascading Style Sheets (CSS) are
used to describe the layout of the XHTML document in the
web browser

XML XSLT
XHTML
document + document

XSL Presentation
+ layout
Stylesheet
CSS
document
14
XHTML generation

• There exist three different possibilities for the XHTML

generation process:

1. Document has been generated before a client request occurs

XHTML XHTML
web server web browser
XHTML Documents

2. Transformation done by server

XML XHTML
web server web browser
XSLT stylesheet

3. Transformation done by client generates XHTML

XML XML
web server web browser
XSLT Stylesheet
15
 XHTML generation on server

Web browser
1 Request for a dynamically
generated document
1 6
2 Web accessible logic (e.g.
Script code in form of Java
Web server
Server Pages or Active Server
XHTML Pages) is executed on
Script code file application server
3 Load XML and XSL data into
2 5
memory
Application server 4 Pass the XML and XSL data to
4 XSLT processor
a XSLT processor

XML XSL 5 Generate the XHTML file

6 Send the XHTML file to the

3 web browser
3

16
 XHTML generation on client

• Alternative 1: the browser requests an XML document that

contains XSL stylesheet reference:
<?xml-stylesheet type="text/xsl" href="pathtofile.xsl"?>

Web browser XHTML 1 Request for an XML document

2 4 and delivery of this document
XML XSLT XSL 2 Web browser determines
document processor document reference to XSL file that is
4 4 included in the XML document
1 3
3 Request for XSL-document
Web server and delivery of this document
4 Out of the XML and XSL data
the browser’s XSLT processor
generates the XHTML
document

17
 XHTML generation on client

• Alternative 2: the requested document contains JavaScript

code, that organises the request for the XML and XSL files
 This method works in non XSLT aware browsers

Web browser
1 Request for a document and
JavaScript-Engine delivery of this document
XHTML
2 2 Web browser executes
<html> tags
5 JavaScript code
JavaScript-
Code 6 3 JavaScript code loads XML
</html> XML XSL data
4 JavaScript code loads XSL
3 4 data
1
5 The transformation of XML
Web server data to XHTML tags is done
inside the JavaScript-Engine
6 Generated XHTML-tags are
included into the document
that finally can be displayed
18
 Transformation on client

• The following code fragment shows a possibility for a

JavaScript based transformation on client
• In real applications it is necessary to detect the client’s web
browser and depending on this information instantiate the
right XML parser
<html>
<body>
<script type="text/javascript"> Instantiating the
var xml = new ActiveXObject("Microsoft.XMLDOM") Microsoft XML parser
xml.async = false
Load the XML data
xml.load("data.xml")
without delay
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("style.xsl") Load XSL data
document.write(xml.transformNode(xsl)) Start the
</script> transformation
</body>
</html>

19
Client-dependent transformation

Regular
XHTML Scheme web browser
chooses Categorizer request
HTML5 Scheme
Mobile
Client

XSLT Adapted
workflow reply
document
Web server

• Depending on the requesting client a categorizer chooses the

necessary stylesheet and forwards it to the XSLT procedure
that generates the client adapted document

20
Generating XML

• In general the content that should be presented is not

stored in XML and thus must be transferred to XML at first
• The conversion of data from a relational database to XML is
done in three steps:
1. Query for data by SQL
2. Storage of data in a temporary data structure (e.g. a
Java object)
3. Transformation of this data structure to XML by using a
language specific Application Programming Interface
(e.g. the Simple API for XML – SAX)

1. SQL 2. Java 3. API XML

Logic
Object data

21
XSLT processors

• Demands on XSLT processors:

– Implementation of at least large parts of the XSL
specification (because of the complexity of the spec. a
full implementation is rare)
– Availability for desired programming language
– Adequate documentation
– Adequate set of example applications
– Support for additional features
– Modular structure which enables simple integration in
own software
– Acceptable output generation speed Schema
– Support for the wanted XSLT version definition
input
• Special demand on XSLT processors: XML
XSLT
– Validating input and output XML trees processor Validator

output valid / not valid

22
XSLT processors

• In addition to the mentioned web browser embedded XSLT

processors, there exist many free or commercial
implementations of the XSLT specifications
• Examples of XSLT processors are:
– XALAN
• Java and C++ open source software library that is
part of the Apache project
– SAXON
• Open Source basic processor and commercial
schema-aware solution and thus supporting
input/output validation
• Includes XQuery processor
– .NET Class System.Xml.Xsl.XslCompiledTransform
• XSLT processor that is integrated in the Microsoft
.NET Framework

23
CSS 3 - Overview

• Cascading Style Sheets level 3 (CSS 3) is the most recent

version of CSS
• First CSS 3 draft was published in June 1999
• Specification is divided into several separate specification
documents named "modules"

Some selected CSS 3

modules: Modules

CSS CSS Fonts CSS CSS CSS 2D

Text Level 3 Animations Transitions Transformations
Text layout Typographic
options options
• Has not been approved as a standard, but huge parts of the
modules’ specification drafts are supported in current
browsers
• Besides improvements in regards of object styling,
animation and transformation, the capabilities of CSS
selectors have been improved 24
CSS 3 - Selectors

• Each style sheet consists of a list of rules consisting of one or

more selectors and a declaration block
• The declaration block defines the styling and layout properties
for elements referred to by the selector
• CSS selectors are patterns that match against elements in a
document tree, and as such can be used besides XPath and
further technologies to select nodes in an XML document
• Besides naming the element, CSS 3 offers various enhanced
variants to describe selectors via so called pseudo classes:
On mouse-
Syntax: over the text
basic-selector : pseudo-class { properties; } color of the
Example: link is
a:hover {color: red;} changed to
red
• Pseudo-class concept permits selection based on information
that lies outside of the document tree and that cannot be
expressed using other simple selectors
25
 CSS 3 - Selectors

Pseudo classes

Dynamic Select elements based on their dynamically determined

state such as e.g. :focus for elements focussed by users
Pseudo classes

Language Select elements based on the human language – e.g.

Pseudo classes :lang(fr-be) or :lang(de)

UI element Select elements (usually form elements) based on their

states state, set by the user (e.g. :checked) or by the developer
Pseudo classes (e.g. :enabled and :disabled)

Structural Classify elements dynamically based on its position in the

Pseudo classes document

Target Allow selection of elements identified by URI fragment

Pseudo classes identifiers – e.g. http://example.com/index.html#fragment

Negation Selects everything except the specified element

Pseudo classes 26
 CSS 3 – Selectors - Examples

Pseudo classes

Links currently focused

Dynamic a:focus{color:green;} are colored green
Pseudo classes
Defines quotation marks
q:lang(no) {quotes: "«" "»";} for the Norwegian
Language <q lang="fr">
Some quote…</q>
language
Pseudo classes
Determines background
UI element input:disabled { color for disabled input
states background-color: #f99; }
fields
Pseudo classes
Every even table row is
Structural table tr:nth-child(even) {
background-color: green; }
colored green
Pseudo classes
color target elements
Target *:target { color : red } red
Pseudo classes
Color form input fields
Negation input:not([type=submit]) { that do not have the
Pseudo classes background-color: green; } type “submit” 27
(=buttons) green
 CSS 3 – 2D Transformations

• CSS 2D Transforms allows elements rendered by CSS to be

transformed in two-dimensional space
• Transformations include: translating, scaling and rotating of
elements
Arbitrary element 1
on a Webpage translate(80px, 80px)

div { Page
height: 100px;
width: 100px;
transform:
translate(80px,
80px)
scale(1.5, 1.5)
rotate(45deg);
}

3 rotate(45deg) 2 scale(1.5, 1.5)

28
CSS 3 - Transitions
• CSS 3 Transitions = visual effects applied when changing from one style to
another
• No need for using JavaScript or Flash animations for this purpose anymore
Syntax:
transition: <property> <duration> <timing-function> <delay>;

Property Description
transition Shorthand property for defining the four transition
properties into a single property
transition-property Specifies the name of the CSS property to which
the transition is applied
transition-duration Defines the length of time that a transition takes

transition-timing- Describes how the speed during a transition will be

function calculated (=transition type)

transition-delay Defines when the transition will start

29
 CSS 3 - Transitions

The transition
<html> has a duration
<style> of 1 second
.button { and starts after
background: #500; color: #fff; padding: 7px 10px; 2 seconds
text-decoration: none; modifying all
border-radius: 10px; newly defined
properties in a
box-shadow: 0px 0px 3px #212121;
linear manner.
transition: all 1s linear 2s;
} On mouse-over
.button:hover { (“hover”) the
background: #b00; properties of
box-shadow: 0px 0px 10px #000; the button are
changed in the
}
manner defined
</style> within the
<p><a class="button" href="...">Improved Button</a> transition.
</p></html> 30
CSS 3 – Media Queries
• CSS 3 allows specification of style sheets for different media types and
media characteristics thus enabling designers and developers to create
styles adapted to the capabilities of the presentation media

Example: only use the stylesheet "style.css" if the presentation

media is either a regular computer screen or a overhead projector
with at least 800 px media width:
<link rel="stylesheet" type="text/css" href="style.css" Logical or
media="screen" and (min-width: 800px),
projection and (min-width: 800px)"/>

Logical and

• Defined media types underline the wide range of expected application

areas of CSS 3:
• aural (speach browser), braille (braille display), embassed (braille
printer), handheld (mobile device such as smartphone), print
(printer), projection (overhead projector), screen, tty (text based
output media such as terminal or text browser), tv (television)
• Media characteristics cover especially screen size, aspect ratio,
orientation and supported colors 31
 Conclusion

Media specific presentation Presentation Layer

video selectors audio
Browser Mobile Browser Feed Reader …
… transitions
animations Modularized
CSS 3 + (X)HTML HTML5 RDF Atom …

Processing Layer
XSLT
processor

XSLT XML API

XML data
stylesheet
Temporary data structure

Storage Layer

RDBMS XML Repository File System ...

32
References

Links at W3C:

XSL homepage http://www.w3.org/Style/XSL/

XSL spec. http://www.w3.org/TR/xsl11/
XSLT 1.0 spec. http://www.w3.org/TR/xslt/
XSLT 2.0 spec. http://www.w3.org/TR/xslt20/
XPath 1.0 spec. http://www.w3.org/TR/xpath/
XPath 2.0 spec. http://www.w3.org/TR/xpath20/
CSS3 selectors http://www.w3.org/TR/selectors/
CSS 3 transforms http://www.w3.org/TR/css3-2d-transforms/
Media Queries http://www.w3.org/TR/css3-mediaqueries/

Further Links

SAX http://www.saxproject.org/
SAXON http://saxon.sourceforge.net/
XALAN http://xalan.apache.org/
XSL Formatter http://www.antennahouse.com/
33