CSS

Document Sample
CSS Powered By Docstoc
					Lecture 0 (half an hour)

Topics
l

CSS
Sang Shin Java ™ Technology Evangelist sang.shin@sun. com (You can use this material in any way you want, but if you can drop me an email when you do, that will be greatly appreciated.)

l l

CSS vs. XML-FO CSS history CSS syntax

XML and Presentation
l l

CSS
l l

l

XML document contains only contents The contents need to be formatted for presentation Two choices for presentation
u CSS

l

non-XML syntax Describes appearance of particular elements in a document No transformation
u Data

(Cascading Stylesheets) u XSL-FO (XSL Formatting Objects)

in the document gets presented more or less as it appears in the XML document u CSS does not change XML document’s markup

XSL-FO
l l l

Three Levels of CSS
l

l

XML syntax Describes the layout of text on a page Have elements for pages, blocks of text, graphics, and so on XML document gets transformed into XSL-FO, which gets rendered by rendering application

CSS1
recommendation in 1996 for HTML u Regarded incomplete u Inconsistent browser implementation
u Only u W3C

l

CSS2
u Current u XML

recommendation and HTML documents

l

CSS3 (Future)

1

CSS Syntax
l

Example XML Document
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?> <?xml -stylesheet type="text/ css" href="12-2.css" ? > <recipe source="Marjorie Anderson"> <dish>Southern Corn Bread</dish> <ingredients> <ingredient> <quantity>1 cup</quantity> <component>flour</component> </ingredient> <ingredient> <quantity>4 tablespoons</quantity> <component>Royal Baking Powder</component> </ingredient> <!-- a few more ingredients --> </ingredients>

l l

Not XML syntax but very straightforward A list of elements with style information For namespace-aware element, full qualified name is to be used

Example XML Document Continued
<directions> <step>Sift flour, baking powder, sugar &amp; salt together.</step> <step>Add 1 cup corn meal.</step> <step>Bake in hot oven at <temperature>425º F</temperature> for <duration>25 minutes</duration>. </step> <!-- a few more steps --> <step optional="yes"> Cut into squares if cooked in shallow pan. </step> </directions> <story> After my mother-in-law <person>Marjorie Anderson</person> died, Beth and I found this recipe written on the "extra recipes" page in a local cookbook in her cupboard. This was published by The Episcopal Churchwomen , Church of Ascension, <city>Mt. Sterling</city>, <state>Kentucky</state>. </story> </recipe>

Example CSS Stylesheet
/* Defaults for the entire document */ recipe {font-family: "New York", "Times New Roman", serif; font-size: 12pt } /* Make the dish look like a headline */ dish { display: block; font-family: Helvetica, Arial, sans-serif; font-size: 20pt; font-weight: bold; text-align: center } /* A bulleted list */ ingredient {display: list-item} /* Format these two items as paragraphs */ directions, story { display: block; margin-top: 12pt; margin-left: 4pt }

Output

Style Rules
l

l

l l

Each rule names an element or set of elements followed by set of style properties enclosed by { } Each style property has name and value Case insensitive Not all elements have style rules
u Child

elements inherits style rules of parent u Reasonable default values are provided

2

Stylesheets and XML Documents
l

Pseudo Attributes
l

l

CSS stylesheets are intended primarily for use in web pages Web browsers look for xml-stylesheet processing instruction in XML document
type=“text/css” href=“recipe.css”?> u 6 pseudo attributes
n type,

type: Stylesheet’s MIME media type
u text/css u text/xml

for CSS (not text/xsl) for XSLT

l

u <?xml-stylesheet

l

href, charset , title, media, alternate

l

href: Absolute or relative URL of stylesheet charset : Name of the character set in which the stylesheet is written title: Name of the stylesheet.

Pseudo Attributes
l

Selectors
l

media: Media type targeted by stylesheet
u screen,

tty, projection, handheld, print, braille, aural, all

l

l

alternate: Tells if the stylesheet is alternate or primary

l

Specifies how to select elements for styling Mostly element names and list of elements CSS provides other basic selectors
u Not

as powerful as Xpath

Element Selectors
l

Attribute Selectors
l

Universal selector
{font-size: large} u Any element which does not have a more specific conflicting rule
u*

l

Matching descentdants
u ingredients

l

quantity {font-size: medium}
l l

l

Matching children
u ingredients

> quantity {font-size: inherit} + story {border-top-style: solid}

l

Matching siblings
u Ingredients

Square brackets allow you to select elements with particular attributes or attribute values step[optional] {display:none} - Hide all step elements that have optional attribute *[optional] {display:none} step[optional=“yes”] {display:none}

3

Display Property
l

Font Property
Dish { font-family: Helvetica, Arial; font-size: x-large; font-style: italic; font-variant: small-caps; font-weight: 900; font-stretch: semi-expanded }

{display: inline}
u Default

if not specified

l

{display: block}
u element

is displayed separated from its siblings by line break items

l

{display: list-items}
u Bullet

Text Property
story { text-indent: 0.5in; text-align: center; text-decoration: underline; text-transform: capitalize; white-space: normal }

Color Property
story { color: #00FF00; background-color: rgb(43, 43,43); border-color: black }

Summary
l

References
l

l

CSS is for styling either HTML or XML documents CSS provides straight-forward but nonXML like syntax for styling

“XML in a Nutshell” written by Elliotte Rusty Harold & W. Scott Means, O’Reilly, Jan. 2001 (First Edition), Chapter 12 “CSS”

4