Learning Center
Plans & pricing Sign in
Sign Out



  • pg 1
									Technologies for an Information Age: .opennet Cascading Style Sheets
Fall Semester 2001 MW 5:00 pm - 6:20 pm CENTRAL (not Indiana) Time

Bryan Carpenter and Geoffrey Fox PTLIU Laboratory for Community Grids
Computer Science, Informatics, Physics Indiana University Bloomington IN 47404

Cascading Style Sheets

In a following lecture we will be discussing the Extensible Style Language, XSL.
– XSL incorporates a general framework for converting an XML file to another format, in particular one suitable for displaying in a Web browser.



Cascading Style Sheets (CSS) is an older specification that provides an alternative, simpler, approach to displaying XML in a browser. CSS is less general than XSL.
– It was designed as a way to control the display of HTML documents, but it can also be used with other SGML-based languages, including XML.


Basic Concepts
 


The structure of a CSS style sheet is very much simpler than an XSLT style sheet—it is just a plain list of rules. A rule consists of a selector—typically a tag name, perhaps with some qualifiers—and a list of declarations that apply to elements matching the selector. A declaration is just a property-value pair.
– For example the declaration color: blue sets the text color to blue in the selected elements.


Style sheets cascade in the sense that if more than one style sheet is in effect for a document (this is regarded as the normal situation), declarations from some sheets may cascade through declarations in other sheets, conditional on some conflict resolution rules.
– This can be thought of as a kind of inheritance.


Here is an XML source file that uses a CSS style sheet:
<?xml-stylesheet type="text/css" href="emptable.css" version="1.0"?>



Style Sheet emptable.css with Display
PERSON {display : block} EMPNO {color : red} ENAME {color : blue ; font-weight : bold} JOB {color : green ; font-style : italic}


  

 

The example style sheet has four rules. The selectors are just element names. The declaration display : block causes the PERSON element to be treated as a block—it starts and ends with a new line. By default the other elements are inline. The declarations for these elements specify color, fontweight, and font-style properties for the enclosed text, in an obvious way.


CSS1 vs CSS2
  

W3C distinguishes two separate specifications: CSS level 1 and CSS level 2. Level 1 is a subset of Level 2. Level 2 adds media-specific style sheets that can support different kinds of display technology:
– Visual browsers, Aural devices, Handheld devices, etc.

  

Level 2 also adds interesting features like content positioning, table layout, and so on. CSS1 specification is about 70 pages long. CSS2 is 300+ pages long. Neither specification is fully supported by any browser, but Netscape 6 probably comes closest.

  

An example rule taken from the CSS1 specification:
H1 { color : blue }

This rule contains a selector ―H1‖ and a single declaration: ―color : blue‖. The declaration sets the property ―color‖ to the value ―blue‖.
– CSS1 defines about 50 properties.


The selector links the style sheet rules to elements in the source file. Any element name is a valid selector.
– In this example we are specifying properties for level 1 headers.


Any user agent (i.e. Web browser) is considered to have a default style sheet.
– Properties need only be specified for elements where the author wishes to override the default values.

Linking HTML to Style Sheet Rules
 

In XML, one uses the xml-stylesheet processing instruction to specify a style sheet for a document. In plain HTML there are several approaches. Here is an example taken from the CSS1 specification:
<HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE=“text/css” HREF=“” TITLE=“Cool”> <STYLE TYPE=“text/css”> @import url( ; H1 { color : blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE=“color:green”>While the paragraph is green.</P> </BODY> </HTML>

 

link element with STLYSHEET relation to main document. style element in HTML head element gives style declarations for whole document. In particular you may include a style file here.
– Note however that is the actually the online home of Vogue, and doesn’t have cool or basic CSS documents 


style attribute on individual element of document.



To give identical declarations for a group of selectors, a rule may start with a comma-separated group of selectors:
H1, H2, H3 { font-family: helvetica } – This sets the same font for headers at all levels.


Several declarations applying to the same selector can be grouped, separated by semicolons:
H1 {font-weight: bold font-size: 12pt ; font-height: 14pt ; font-family: helvetica}


Certain properties group together, e.g. there is a font property whose value is a fixed-order list of font-related properties:
H1 {font: bold 12pt/14pt helvetica} – by definition, equivalent to the preceding example.



Suppose the style rule:
H1 { color : blue }


is in effect. In this example:
<H1>The headline <EM>is</EM> important</H1>

 

the EM element inherits the color attribute from its parent element, although no color declaration has been given for EM. Many properties may be inherited in this way. Thus one can set a default property for the whole document by giving a rule for the BODY element.


Contextual Selectors

If we specifically want EM elements inside H1 elements to turn a different color, we can use a contextual selector:
H1 EM {color: red}


The juxtaposed list of selectors ―H1 EM‖ means: this declaration applies only to EM elements immediately nested inside H1 elements.
– Behaves something like an Xpath selection, as we will see in later lecture on XLST.


Although not immediately relevant to XML, here is a useful style sheet using contextual selectors:
OL LI {list-style: upper-roman} OL LI LI {list-style: upper-alpha} OL LI LI LI {list-style: decimal}

HTML lists with contextual selectors


  

In CSS1 there are two kinds of pseudo elements: firstline and first-letter. These keywords can be attached to selectors as qualifiers, separated by a colon. Example:
P:first-line {font-variant: small-caps} P:first-letter {color: red}


  

Selectors in CSS style sheets can also be based on the value of an attribute called CLASS. For this to work, the elements in the source document must be annotated with this attribute. In the CSS rule, the class is attached as a qualifier to the (otherwise possibly empty) selector, separated by period.
H1.PASTORAL {color: green} .RED {color: red}


The rules might be exploited as follows
<h1 CLASS="PASTORAL">6th Symphony</h1> <p> First movement. <p CLASS="RED"> Second movement. <p> Other movements.

Miscellaneous Properties


The display property controls, in particular, whether an element is displayed as a standalone block, or as an inline element in the ordinary flow of text. There are may properties that control text style and layout. These properties include:
– – – – – – – – float Describes how text should flow around an element. font-family The font face font-size font-weight line-height text-align Can be left, right, center, justify text-decoration Can be underline, etc. vertical-align Supports subscripts, superscripts, etc.

Miscellaneous Properties

Setting colors and backgrounds:
– – – – color background-color background-image A URL background-attachment Does background scroll?


Margins and alignments
– line-height Sets any value – margin-right, margin-left, . . . – text-indent Of first line of block elements.


– border-style May be dotted, dashed, solid, etc.


 Inside

XML, Chapter 9: ―Cascading Style Sheets‖.

 ―Cascading

Style Sheets, level 1‖,
Style Sheets, level 2‖,
 ―Cascading


To top