IST 221 Internet Concepts
and Applications
Introduction to XML II
CSS and XSLT Style Sheets
Display XML Documents with
Style Sheets
• Two type of style sheets could be used to
provide style information for the elements
in the xml document
– CSS : lists element’s css attributes and
associated values
– XSLT: contains templates that describe the
desired document structure into which the
data of an xml document can be inserted.
Display XML Documents with
CSS
• Create a CSS that lists all the style rules
for the Elements in the xml document.
element_1{style_ attr1: value1;
style_att2:value_2}
• Examples of style attributes: color, fontsize, margin-left, and display.
– Attribute “display” takes on two values: inline
(default) and block.
Display XML Documents with
CSS
• To connect the external CSS to the xml
document, include the following statement
in the xml document
• <? xml-stylesheet type = “text/css” href =
“style_sheet.css” ?> where would you add
this statement? Put this after xml declare
and before root element.
Display XML Documents with
XSLT Style Sheets
• XSL Extensible Stylesheet Language
• XSL transformation (XSLT)
– Transform an XML document into
different form, in particular, HTML
• A XSLT style sheet contains one or
more templates that describe the
desired document format and
structure.
XSLT Structure
• A XSLT style sheet is an xml document containing
one root element: xsl:stylesheet and one or more
templates under the root element.
– i.e. XML declaration needs to be included:what is this?
• Stylesheet tags
<xsl:stylesheet version = “1.0”
xmlns:xsl = “http://www.w3.org/1999/XSL/Format”
xmlns = “http://www.w3.org/TR/xhtml1/strict”>
…………….template goes here.
</xsl:stylesheet>
XSLT Structure (continued)
• Template tags: to specify the
structure and display for elements
on the associated xml file
<xsl:template match = “/”>
structure rules for root element
<xsl:template match = “plane”>
structure rules for element “plane”
• Close with </xsl:template> tag
XSLT Structure (continued)
• value-of tag: to display the value of a
element value of select = “plane/[year]”
<xsl:value-of select =
“element[/child_element]”>
• for-each tag: to display siblings.
– select each child-element of a specific element
<xsl:for-each select =
“root_element[/child_element]” >and
create a loop.
• HTML tags could be used to specify content.
Merge an XSLT stylesheet into
an XML Document like a mail merge
• An XSL style sheet is saved as an .xsl file
• Add the following statement into the
corresponding XML document
<? xml-stylesheet type = “text/xsl” href =
“xslstyle_sheet.xsl” ?>
Exercises
• 8.2 Implement an external planes.css for
planes.xml. Include the following style rules:
• ad ( style attributes and associated values)
– display: block
– margin-top: 15 px
– color: blue
• year, make and model
– color: red
– font-size: 16pt
• color, description
– display: block
– margin-left: 20 px
– font-size: 16pt
Exercises
• seller
– display: block
– margin-left: 15 px
– font-size: 14pt
• location
– display: block
– margin-left: 40 px
• city, state
– font-size: 12pt
• Connect the CSS to planes.xml from Ex 8.1
• Display the file planes.xml
Exercises
• Exercises 8.3: download xslplane.xml and
xslplane.xsl
• Exercise 8.4: download xslplanes.xml and
xslplanes.xsl
• We will be discussing the structures of the
two set of files
• Question: What are the differences
between using CSS and XSL style sheets
for an XML document?