Embed Size (px)
Citation preview
Copyright © 2003 Pearson Education, Inc. Slide 4-1
Created by Cheryl M. Hughes, Harvard University Extension School — Cambridge, MA
The Web Wizard’s Guide to XML by Cheryl M. Hughes
Copyright © 2003 Pearson Education, Inc. Slide 4-2
CHAPTER 4All About Style: XML Presentation
Copyright © 2003 Pearson Education, Inc. Slide 4-3
XML Presentations
XML provides two methods for formatting: Cascading Style Sheets (CSS) Extensible Stylesheet Language (XSL)
Benefits of separating style from content Allows authors to create elements that
describe the data, not the format Allows for multiple presentation layouts for a
single document Allows a single style document to format many
XML documents
Copyright © 2003 Pearson Education, Inc. Slide 4-4
Cascading Style Sheets (CSS)
CSS was introduced as a recommendation by the W3C in 1996
CSS is widely accepted by web browsers CSS files are plain text files and can be
edited with a text editor CSS style sheets work with XML and
HTML files
Copyright © 2003 Pearson Education, Inc. Slide 4-5
CSS Syntax
CSS Declaration: <?xml-stylesheet type=”text/css” href=”styles.css”?>
CSS rules consists of two parts: Element selector Properties declarations
CSS rule example:address {
font-size: 12pt;font-family: arial}
CSS comments:/* This is a comment */
Copyright © 2003 Pearson Education, Inc. Slide 4-6
CSS Properties
Major property categories: Font properties Text properties Color properties Border properties Display properties
Copyright © 2003 Pearson Education, Inc. Slide 4-7
CSS Example – XML Document
1 <?xml version=”1.0” standalone=”yes”?>2 <?xml-stylesheet type=”text/css” href=”emails-1.css”?>3 <emails>4 <!-- Begin Message 1 -->5 <message>6 <to>joe@acmeshipping.com</to>7 <from>brenda@xyzcompany.com</from>8 <date_sent>02/12/01</date_sent>9 <subject>Order 10011</subject>10 <body>11 Joe, 12 Please let me know if order number 10011 has
shipped. 13 Thanks, 14 Brenda15 </body>16 </message>17 <!-- End Message 1 -->18 </emails>
Copyright © 2003 Pearson Education, Inc. Slide 4-8
CSS Example – CSS File
1 to, from {
2 font-weight:bold;
3 text-align:left;
4 border-style:solid
5 }
6 date_sent {
7 font-style:italic;
8 color:blue
9 }
10 subject {
11 text-decoration:underline;
12 background-color:green;
13 color:yellow
14 }
15 body {
16 margin-top:10;
17 display:block
18 }
Copyright © 2003 Pearson Education, Inc. Slide 4-9
CSS Example – Viewing in Browser
Copyright © 2003 Pearson Education, Inc. Slide 4-10
Overview of XSL
The XSL specification was released by the W3C in October 2001
XSL is a style sheet language developed specifically for XML
XSL provides more powerful formattin features than CSS
XSL behaves more like a programming language, making it very flexible
