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 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 = “ ” xmlns = “ ”> …………….template goes here.

XSLT Structure (continued) Template tags: to specify the structure and display for elements on the associated xml file structure rules for root element structure rules for element “plane” Close with tag

XSLT Structure (continued) value-of tag: to display the value of a element value of select = “plane/[year]” for-each tag: to display siblings. –select each child-element of a specific 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

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?