1/18 ITApplications XML Module Session 5: Extensible Stylesheet Language (XSL)

2/18 Comparing XSL to CSS – Use of CSS to specify styles for HTML/XHTML Cascading Style Sheets are one way of formatting XML data (the other is using XSLT) Cascading Style Sheets are one way of formatting XML data (the other is using XSLT) CSS is used for presentation of XML data in a web browser CSS is used for presentation of XML data in a web browser As with XHTML, you specify an element and the style it should have. Example: As with XHTML, you specify an element and the style it should have. Example: title { display: block; margin: 1em; text-align:justify; color: #0000FF; } Filename: Books.css

3/18 To link a stylesheet to an XML document, you declare it as following: To link a stylesheet to an XML document, you declare it as following: <root><book> SAMS Teach Yourself XML In 21 Days SAMS Teach Yourself XML In 21 Days <publisher>SAMS</publisher> Steven Holzner Steven Holzner <isbn> </isbn><price>28.99</price></book></root> Filename: Books.xml Filename: Books.xml

4/18 You cannot specify class or id selectors in your style sheets. These are only applicable to XHTML. You cannot specify class or id selectors in your style sheets. These are only applicable to XHTML. Style rules apply only to elements. Style rules apply only to elements. Used to present XML data in a meaningful way. Used to present XML data in a meaningful way. Can be combined with other XML technologies e.g. XSLT, XLinks Can be combined with other XML technologies e.g. XSLT, XLinks Browsers have “quirks” when implementing CSS. Browsers have “quirks” when implementing CSS.

5/18 Use of XSL to specify styles for XML Elements Apply styles to all elements, specific elements or descendents of elements Apply styles to all elements, specific elements or descendents of elements Basic StyleXML Sample Basic StyleXML Sample aaa { text-align: left; aaa { text-align: left; color: blue; Letter A } color: blue; Letter A } Grouped StylesXML Sample Grouped StylesXML Sample aaa, bbb aaa, bbb { { font-family: Arial; font-family: Arial; color: green; Letter A } Letter B color: green; Letter A } Letter B

6/18 DescendentsXML Sample DescendentsXML Sample bbb ccc bbb ccc { color: red; } { color: red; } Letter B Letter B Letter C Letter C Immediate ChildrenXML Sample Immediate ChildrenXML Sample example > ccc example > ccc { color: green; { color: green; } Letter C } Letter C Letter B Letter B Letter C Letter C

7/18 Immediate Sibling Immediate Sibling aaa + bbb { aaa + bbb { border-left: 1px solid green; border-left: 1px solid green; } XML Sample XML Sample <example> Letter A Letter A Letter B Letter B Letter C Letter C </example>

8/18 CSS Attributes Elements with attributes can have rules applied to them. You can select elements with particular attributes or attribute values by the use of square brackets. Elements with attributes can have rules applied to them. You can select elements with particular attributes or attribute values by the use of square brackets. Example of an element that has an attribute: StyleXML Sample Example of an element that has an attribute: StyleXML Sample aaa[asciichar] aaa[asciichar] { { font-weight:bold; font-size:12pt; Letter A font-weight:bold; font-size:12pt; Letter A } }

9/18 Example of an element that has an attribute with a particular value: Example of an element that has an attribute with a particular value:Styleaaa[show=“no”]{ display:none; display:none;} XML Sample <example> Letter A Letter A Letter a Letter a </example>

10/18 Example of an element with an attribute value as part of a list. Example: Example of an element with an attribute value as part of a list. Example: <example> Letter A Letter A Letter B Letter B </example>aaa[tasks~=“letter”]{ color: blue;Note: attribute has value of “letter” } aaa[tasks|=“character”] aaa[tasks|=“character”] { font-weight:bold; } { font-weight:bold; } Note: attribute has a hyphen-separated list of values beginning (from the left) with “character”

11/18 CSS – Pseudo-class You can apply styles according to certain conditions specified by a pseudo-class. Syntax for pseudo-classes: selector:pseudo-class {property: value} Syntax for using a CSS class with a pseudo-class: selector.class:pseudo-class {property: value} You can apply styles according to certain conditions specified by a pseudo-class. Syntax for pseudo-classes: selector:pseudo-class {property: value} Syntax for using a CSS class with a pseudo-class: selector.class:pseudo-class {property: value}

12/18 Examples (Anchor Pseudo-classes) a:link { color: #0000FFNote: Unvisited hyperlink } Examples (Anchor Pseudo-classes) a:link { color: #0000FFNote: Unvisited hyperlink } a:visited { color: #FE0000Note: Visited hyperlink } a:hover { color: #FF00FFNote: Hover mouse over hyperlink } a:active { color: #0A00FFNote: Hyperlink was clicked }

13/18 Examples ( CSS class with a pseudo-class ) Sample Style a.blue:visited { color: #0000FF; } Sample XHTML Examples ( CSS class with a pseudo-class ) Sample Style a.blue:visited { color: #0000FF; } Sample XHTML Click Me Click Me

14/18 CSS – Pseudo-elements Apply styles according to certain conditions specified by a pseudo-element Apply styles according to certain conditions specified by a pseudo-element First Line: aaa:first-line {color:green;} First Line: aaa:first-line {color:green;} First Letter: aaa:first-letter {font-weight:bold; font-size:16pt;} First Letter: aaa:first-letter {font-weight:bold; font-size:16pt;} Before:aaa:before {content:open-quote;} Before:aaa:before {content:open-quote;} After:aaa:after {content:close-quote;} After:aaa:after {content:close-quote;}

15/18 CSS – Blocks & in-line Elements in CSS are considered block or inline, as defined by the display property. Elements in CSS are considered block or inline, as defined by the display property.

16/18 CSS – “display” property Used to specify how an element is to be displayed: Possible values are: Used to specify how an element is to be displayed: Possible values are: block block inline inline table table table-row table-row table-cell table-cell none none

17/18 CSS – Margins, Borders, Padding Margins, borders and padding can add spacing and lines around content Margins, borders and padding can add spacing and lines around content

18/18 XSL is composed of three components XSLT – used for transforming XML documents. XSLT – used for transforming XML documents. XPATH – used for addressing portions of an XML document. XPATH – used for addressing portions of an XML document. XSL-FO (Formatting Objects) – used for controlling the layout of printed documents output to a monitor, printer or other devices. XSL-FO (Formatting Objects) – used for controlling the layout of printed documents output to a monitor, printer or other devices.