Download Entities and Attributes - McGraw Hill Higher Education

Applying Cascading
Style Sheets
Ellen Pearlman
Eileen Mullin
Programming the Web Using XML
McGraw-Hill/Irwin
© 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
7-2
Learning Objectives
1. Accessing CSS stylesheets and associating
them with XML documents
2. Tracing the evolution of the CSS format
3. Differentiating CSS from the XSL format
4. Understanding the function and usage of
CSS properties and values
5. Examining emerging developments in
applying CSS to XML
7-3
Introducing CSS
• Cascading Style Sheets, or CSS, was first developed
to define how to display HTML elements within Web
browsers, but later was applied to XML documents as
well.
• Web designers could save vast amounts of time by
having all pages in a Web site – up to hundreds or
thousands of pages – refer to a single set of styles
(stored in an external stylesheet) for their formatting
and display.
• External stylesheets are stored in CSS files, which
are text files with a .css file extension.
7-4
Developing XML Styles
• If you have ever created your own HTML
documents before, you may have had some
experience with using CSS to apply a
consistent look-and-feel across a page or
even all pages in a Web site.
• Similarly, applying styles to your XML
documents can ensure your pages all
conform to the same design, while making it
easy to update multiple files any time a style
changes.
7-5
Comparing How to Apply CSS Styles to
both HTML and XML Documents
With HTML
• Linked stylesheet
• Embedded
stylesheet
• Inline Styles
With XML
• Linked stylesheet
7-6
Associating a CSS Stylesheet With
an XML Document
• You link to an external stylesheet immediately
after the opening line of your XML document.
• The standard uses the name xml-stylesheet
and includes parameters for href and type
that resemble XML attributes.
• Here, the href should point to the .css file in
use, and the type should be set to "text/css".
<?xml version="1.0" encoding="UTF-8"?>
<? xml-stylesheet href="mysite.css" type="text/css" ?>
7-7
How CSS Has Evolved: CSS1
• CSS1 was first released as a W3C
Recommendation – meaning that the
specification is now officially considered a
Web standard – in December 1996.
• The specification was updated again in 1999
at the same time that CSS2 was released.
• Netscape and Microsoft each began to
include support for CSS1 in version 4 of their
respective Web browsers.
7-8
How CSS Has Evolved: CSS2
• When CSS2 was first recognized by the W3C
as a standard in 1999, it added several major
style features that were lacking in CSS1.
These include:
– Support for printers and aural devices
– Element positioning
– Tables
• By early 2002, newer browsers supported
Web standards much better than their
predecessors, including many CSS2 features.
7-9
How CSS Has Evolved: CSS3
• Still in the working draft stage, CSS3 is being
published in modules, rather than in a single
specification as CSS2 and CSS1 were.
• The purpose here was to have the W3C
standards body continue to advance
individual properties on an ad hoc basis,
without needing to wait for the rest of the
specification to be ready first.
7-10
Introducing CSS Syntax:
Properties and Values
• The CSS syntax is comprised of three parts:
a selector, a property and a value.
• Some sample styles would look something
like this:
body {color: black}
p {font-family: "sans serif"}
p { text-align: center; color: red }
7-11
Displaying Block and Inline
Elements
• Inline elements appear within part of a
larger block of text.
– Hypertext links, emphasized or boldface
text, or superscript numbers (in a footnote,
for example) are all good examples of this.
• Block elements should be separated
from their surrounding neighbors.
– Headings and subheads, list items, or
quoted passages are some examples.
7-12
Inline Elements: Italicized and
Subscripted Text
7-13
Display Property
• CSS styles for XML documents use the
display property to identity inline and block
elements.
• If no display property is specified, the default
value is block. For example:
blurb { font-size: 16pt }
is equivalent to:
blurb { font-size: 16pt; display: block }
7-14
Display Property (2)
• CSS2 adds additional options, mostly for table
markup:
sidebar { display: block }
secret { display: none }
em { font-weight: bold; display: inline }
• And here’s how these styles might be applied within
an XML document:
<sidebar>You will need to enter the registration code for your 30day free trial when you first install the software.</sidebar>
<secret>The secret code for unlimited usage is XYZZY.</secret>
<sidebar>The registration code is located on the <em>back
cover</em> of the CD packaging.</sidebar>
7-15
Displaying Block, Inline, and
Hidden Elements
7-16
Lists
• The List properties let you:
– Choose various list-item markers (numbers
or bullets)
– Set an image as a list-item marker (a very
useful visual cue for readers), and
– Set where to place a list-item marker
(which affects indenting)
bullet { display: list-item }
7-17
Displaying a List
7-18
Display Differences Seen When
Changing the list-style-position Value
7-19
Utilizing the list-style-image
Property
• The list-style-image property sets an image as the
list-item marker. Here’s an example of how such
images could appear with several features on a
restaurant review site's roundup:
food { list-style-image: url(images/fork.gif) }
decor { list-style-image: url(images/window.gif) }
rating { list-style-image: url(images/thumb.gif) }
Within the XML document:
<food>Japanese</food>
<decor>Elegant</decor>
<rating>3.7</rating>
7-20
Backgrounds
• Using CSS’s background properties,
you can define the background effects
of an element.
• These effects include color or a
background image, or details about the
display of the background image.
7-21
Backgrounds (2)
• Here’s an example of putting CSS’s background
properties to work to affix a logo in the bottom right
corner of the screen:
body {
background-attachment: fixed;
background-image:
url("http://www.genuineclass.com/images/pigtails.gif");
background-repeat: no-repeat;
background-position:
bottom right
}
7-22
Making an Image Appear Persistently
in the Screen’s Bottom Right Corner
7-23
Text
• CSS’s text properties let you change text
color, indent the first line in a block of text,
transform upper- and lowercase, increase or
decrease the space between characters, or
set the text alignment.
allcapshead { font-family: helvetica; text-transform: uppercase }
p { text-indent: 10 px }
7-24
Text (2)
• The following paragraph will have its first line
indented 10 pixels from the left.
<allcapshead>How to apply</allcapshead>
<p>Enclose a current resume or background information illustrating
your qualifications.</p>
…as shown below:
7-25
Fonts
• The font properties enable you to change the font
family, size, boldness, and the style of a text:
caption { font-style: italic }
• Similar to list-style and the background property, the
font property lets you define multiple font properties –
for typeface, size, weight, and so on – in a single
declaration:
captioncopy: {oblique small-caps 900 10px/12px arial}
7-26
Borders
• You can use CSS’s border properties to specify a
border around any element, including style, color.
callout {border-width: thin}
• The border property provides a shortcut to setting all
of the properties for the four borders in a single
declaration:
coupon { border: thin dotted #000000 }
7-27
Margins
• You can use CSS's border properties to specify a
border around any element, including style, color.
sidebar {margin: 2cm 4cm 3cm 4cm}
• Here’s how you might apply such a style within your
XML document:
<bodytext>This is an example of the "bodytext" style. It
displays without any special formatting for the
margins.</bodytext>
<sidebar>Here, we've set up a block of text using the
"sidebar" style.</sidebar>
<bodytext>And finally, let's return to the plain
"bodytext" formatting.</bodytext>
7-28
Using the Margin Properties
in CSS
7-29
Borders
• Use the padding properties to indicate how much
space should appear between an element’s border
and the content contained therein:
callout {padding: 7px}
rightindent {padding-left: 5px; padding-right: 50px}
7-30
Advanced CSS Formatting:
Dimension
• CSS’s dimension properties control the height
and width of an element. You can also use it
to increase the space between two lines.
• Currently only the CSS1-compatible
properties are supported in current versions
of Microsoft’s and Netscape’s browsers.
7-31
Advanced CSS Formatting:
Classification
• This set of properties gives you control over
how to display an element.
• You can determine where an image will
appear in another element, position an
element in absolute or relative terms, and
manage the visibility of an element.
7-32
Advanced CSS Formatting:
Positioning
• Both the Microsoft and Netscape browsers
support these CSS2 properties.
• The positioning properties let you specify the
left, right, top, and bottom position of an
element.
• You can also set the shape of an element,
place one element behind another, and
determine what should happen if an
element’s content is too big to fit in a
specified area.
CSS’s Positioning Properties at
Work
7-33
7-34
Comparing CSS to XSL
Advantages of CSS
• Relatively simple to
implement.
• New application of
an existing
technology, which
ensured broad
support in current
Web browsers.
Advantages of XSL
•
•
•
•
•
•
Can convert XML into HTML,
then sort and filter it based on
the values in the data.
Can process elements more
than once.
Can suppress elements in one
place, then present them
elsewhere.
Add generated text to the
presentation
Sort and filter output into any
language.
Can produce more
sophisticated page layouts and
styles than CSS can.
7-35
Comparing CSS to XSL (2)
• In short, although CSS and XSL have similar
goals – namely, in separating content from
format – they really shouldn't be viewed as
competing standards.
• Use CSS for straightforward formatting tasks
that don’t involve manipulating the order of
your data.
• For more sophisticated transactions involving
sorting or filtering your XML data, use an XSL
implementation.
7-36
Ensuring Your CSS is Valid: The
W3C’s Online Validation Service
7-37
The End