Displaying XML Documents Using CSS and XSL

1
Displaying XML Documents Using CSS and XSL

• Chapter 3

2
Objectives

• Display an XML document in a browser
• Identify the style rules of CSS
• Discuss different patterns and templates of XSL
• Apply different styles to XML elements using CSS
  and XSL
• Transform XML documents into HTML documents using
  XSLT
• Identify the differences between CSS and XSL

3
Style Sheets - 1
Document to be displayed
An XML document can be displayed in different
formats in different display devices such as
computer, printer, and the like.
4
Style Sheets - 2

• A Style sheet is a set of instructions to display
  the documents

It separates presentation layer from the content
data of the document.
A single XML document can have multiple style
sheets
5
Style Sheets - 3

• A few style sheets available in the market
  include
• CSS- Cascading Style Sheets
• XSL-eXtensible Style sheet Language
• DSSL-Document Style Semantics and
  Specification Language

6
Uses of CSS and XSL
Visibility of an element
Cascading style sheet is used to manipulate
Positioning and sizing of elements
Colors and Background
Font and Text
Spacing
XSL is used for formatting and converting
documents written in one XML DTD into another DTD.
7
XML and Style Sheets

• XML documents are plain text files.
• The style sheets are used to format and view the
  XML document.
• Two commonly used style sheets with XML are
• CSS - an extension of HTML
• XSL - an XML specific styling language

8
Working of XML
9
Displaying an XML Document Using CSS -1

• XML document
• lt?xml version'1.0'?gt
• lt?xml-stylesheet type"text/css"
  href"hello.css"?gt
• ltxsampdocgt
• ltgreetinggtHello, ltextensiongtthere!lt/exten
  siongtlt/greetinggt
• ltanswergt
• ltansgtGood ltextensiongtmorning!
  lt/extensiongtlt/ansgt
• ltquestiongtHow are you? lt/questiongt
  
• lt/answergt
• lt/xsampdocgt

10
Displaying an XML Document Using CSS -1
The CSS document for the XML document

• Xsampdoc
• margin-top.7in
• margin-bottom .7in
• margin-left1.5in
• margin-right1in
• color navy
• background-colorwhite
• display block
• greeting
• displayblock
• font-family Arial, Helvetica,
  sans-seriffont-size 32pt
• width 30em
• color red

• question
• displayblock
• font-size x-large
• color black
• answer ans
• display block
• font-size 20pt
• color blue

11
CSS Style Rules

• The Syntax for style rules in a Cascading Style
  Sheet is Selectordeclaration
• The selector identifies the tag to which the
  style applies.
• The declaration provides the style rules applied
  to the selector.
• This is referred as Simple Selector.

Example greeting displayblockfont-family
Arial, Helvetica,sans-serif font-size
32pt width 30em color red
12
Multiple Selector
Selector 1

• Used to apply the same style rule for different
  elements
• Syntax
• selector,selector.declaration

The same Style Rule is being used by Selector1
and Selector2
Style Rule
Example greeting,question font-family
sans-serif font-size 32pt
Selector 2
13
Contextual Selectors -1

• It helps us to differentiate between the
  different occurrence of a tag.

MADE IN U.S.A
tag
Conceptual Selector
Occurrence 1 tag(declaration Occurrence
2 tag(declaration
Occurrence 1
Occurrence 2
14
Contextual Selectors -2

• Example
• ltxsampdocgt
• ltgreetinggtHello! ltextensiongttherelt/extensiongtlt/gr
  eetinggt
• ltanswergt
• ltansgtFineltextensiongtherelt/extensiongtlt/ansgt
  
• ltansgtThank you.lt/ansgt
• lt/answergt
• lt/xsampdocgt

Contextual Selectors to differentiate between the
different occurrences of ltextensiongt greeting
extensiondeclarations answer ans
extensiondeclaration
15
Linking the CSS to XML

• The Cascading style sheet has to be referenced in
  the XML document.
• We use a processing instruction to do so.
• Syntax
• lt?xml-stylesheet typetext/css
  hrefurl?gt

Example lt?xml-stylesheettype"text/css
href"hello.css"?gt
16
Properties and Values

• A value of the CSS styling property may be a
  string, a number with a unit, an integer, or a
  color value.
• Values can be absolute or relative, inheritable
  or non-inheritable.

Example Absolute value Pmargin-left3cm A
margin of 3 centimeter is created irrespective of
the margin size.
Example Relative value Pmargin-left10 A
margin of 10 of the width of the page is created.
17
Color Values
XML supports the following color values
18
Formatting the Text - 1

• The CSS properties allow to specify the font in
  which an element will be displayed, its size and
  color.
• ltabsolute-sizegt and ltrelative-sizegt keywords are
  used with font properties

ltabsolute-sizegt xx-small x-small small medium
ltrelative-sizegt large smaller
19
Formatting the Text - 2

• The different font properties that can be set
  are

font-family
font-size
font-variant
Font
font-style
font-weight
20
Boxes -1

• Blocks of text can be contained in a box.
• The following three properties apply to the
  boxes
• Margins
• Border
• Padding
• Padding is the distance between the contents of
  the adjacent box.
• Margin is the distance between the border and the
  outer edge of the adjacent box, or between the
  border and its containing box.

21
Boxes -2
22
Margins, Border and Padding
Boxes

• The padding property is used to specify the
  distance or space between the border and its
  contents.

23
Controlling Layout

• The CSS layout properties can control the box on
  the screen.
• The boxes can be overlapped using the z-index
  property.

A paragraph that is two inches by one inch and
with a scroll bar is displayed
24
XSL

• It is a style sheet application created
  specifically for XML.
• Features of XSL include
• It provides a transformation language (XSLT).
• XSL can be used as a formatting language.
• XSL can be used to sort and filter.
• XSL can be used for pattern matching to find
  records.

25
XSL - 2
XML Document
XSL
HTML document displayed in the Web
26
Example for XSL

• The XSL style sheet code
• lthtmlgt
• ltheadgt
• lttitlegtIcons In Cricketlt/titlegt
• lt/headgt
• ltbodygt
• lth2gtIcons In Cricketlt/h2gt
• lttable border"2" cellpadding"3"gt
• lttrgt
• lttdgtPlayerlt/tdgt
  lttdgtNo. Of Catcheslt/tdgt
• lttdgtNo. Of 100'slt/tdgt
• lttdgtNo. Of 50'slt/tdgt
• lt/trgt
• ltxslfor-each select"cricket/player" order-by
  "-catches"gt

• lttrgt
• lttdgtltxslvalue-of select"name"/gtlt/tdgt
• lttdgtltxslvalue-of select"no_50"/gtlt/tdgt
• lttdgtltxslvalue-of select"no_100"/gtlt/tdgt
• lttdgtltxslvalue-of select"catches"/gtlt/tdgt
• lt/trgt
• lt/xslfor-eachgt
• lt/tablegt
• lt/bodygt
• lt/htmlgt

27
Patterns

• The patterns supported in XSL are
• Sorting
• Operators
• Filtering

Letters after sorting
28
Sorting

• The default sorting is ascending order.
• The - sign is used to sort in descending order.

The chart is organized in the descending order of
catches
29
Operators
/ ./ // .// _at_
//name / _at_ //name
XSL supports the se operators
30
Filtering and Logical Operators

• Filter operations can contain expression such as
  Boolean expression, AND, OR, and NOT expressions
• The different logical operators that can be used
  are

31
Templates

• Templates are the instructions in an XSL style
  sheet, which control the conversion of element
  and its content.
• It is represented by ltxsltemplategtlt/xsltemplate
  gt
• It is applied with the ltxslapply-templates/gt
  element
• The template has two parts
• The matching part
• The processing part

Processing part
Matching part
32
Types of Matching
Matching by name
Matching by ancestry
Matching several names
Matching the root
Matching
Matching by ID
Wildcard matches
Matching by attributes
33
Switching Styles
Data Islands 1
XML document
Data Islands 2
Data Islands 3
34
Difference Between XSL and CSS