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, font-size, 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?