4.
1 CSS - Cascading Style Sheets
Main ideas and essential features
as preliminaries for studying XSL
What is it? Use and status Processing model Rules, selectors, generated content Usability in practise
SDPL 2003
Notes 4.1: CSS
CSS - Cascading Style Sheets
Main usage:
to specify the representation of web pages by attaching style (fonts, colours, margins, ) to HTML/XML documents also used to specify a "WYSIWYG" presentation in some commercial XML editors, e.g., SofQuad XMetal (of Corel; Windows) Morphon (of Morphon Technologies; Java)
SDPL 2003
Notes 4.1: CSS
W3C CSS Recommendations
Level 1 (CSS1), Dec. 1996 (Rev. Jan. 1999)
basic features, from the point of view of HTML
Level 2 (CSS2), May 1998
different media types
paged media (for printing), aural style sheets (for speech synthesis)
extended selection mechanism generated content, automatic numbering formatting of tables,
Level 3 (CSS3)
ongoing work; split in May 2001 into 26 modules
Notes 4.1: CSS 3
SDPL 2003
CSS Style Sheets
Style sheet is a set of style rules
Style rule syntax:
selector { declarations } selector locates elements affected by the rule declarations syntax: prop1:val1; ; propn:valn sets values for style properties CSS1 defines about 50 properties, CSS2 about 120
SDPL 2003
Notes 4.1: CSS
CSS Style Rules
Example rules
H1 {color: blue}
/* blue text for first-level HTML headers */
H1,H2,H3 {font-style:bold;}
/* Alternative selectors grouped together: */ /* bold font for all HTML headers */
CODE {font-family: monospace; color: red }
SDPL 2003 Notes 4.1: CSS 5
CSS1 Properties (1/2)
Font properties:
helvetica/serif/
normal/italic/oblique
font, (-family/-style/-variant/-weight/-size)
normal/bold/bolder/ ...
Color and background properties:
color; background (-color/-image/-repeat/-attachement/ -position)
Text properties:
sub/super/...
word-spacing, letter-spacing, text-decoration, verticalalign, text-transform, text-align, text-indent, line-height
left/right/center/justify
SDPL 2003 Notes 4.1: CSS 6
CSS1 Properties (2/2)
Box properties:
for controlling size, margins, borders etc. of boxes (see later)
Classification properties:
display (values: block | inline | list-item | none), white-space (values: normal | pre | nowrap), list-style, (-type/-image/-position)
decimal/lower-alpha/ disk/...
SDPL 2003 Notes 4.1: CSS
inside/outside
Attaching CSS Style to HTML
Four ways: 1. with a LINK element;
2. with a STYLE element in document HEAD; 3. by an import mechanism; 4. in a STYLE attribute
<HTML><HEAD><TITLE>A sample page</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="my_style.css" > <STYLE TYPE="text/css"> @import url(http://style.com/basic); H1 { color: blue } </STYLE></HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE="color: green">but this is green. </BODY> </HTML>
SDPL 2003
Notes 4.1: CSS
Attaching CSS Style ...
W3C Rec for linking styles to XML:
<?xml-stylesheet href="example.css" type="text/css" ?>
Rules from different sources merged together
including browser defaults and user preferences Problems of cascading
author: blue background + user: blue text -> ? Should author have control of style? What if visually disabled user needs large font size? Should user have control of style? What if readability depends on detailed size and placement of text?
SDPL 2003
Notes 4.1: CSS
CSS Processing Model (simplified)
0. Parse the document into a tree 1. Match style rules to elements of the tree
annotate each element with a value assigned for each relevant property
inheritance and, in case of competing rules, elaborate "cascade" rules applied to select which value is assigned
2. Generate a formatting structure of the annotated document tree
consists of nested rectangular boxes
3. Render the formatting structure
display, print, speak, ...
SDPL 2003 Notes 4.1: CSS 10
Inheritance (1/2)
Most properties are inherited by subelements
can be overridden can be modified (e.g. increase indent, set font size to 150% of current)
Some non-inherited properties:
background properties
by default shine through the boxes of decendants
padding, margin and border properties
but they effect the placement of sub-elements (See CSS Box Model a bit later)
SDPL 2003
Notes 4.1: CSS
11
Inheritance (2/2)
Consider document fragment
<chap><title> </title> <section> </section> </chap>
and rules
chap { font-size: 12pt; font-family: serif } title { font-size: 150% } Now both title and section will be formatted using a serif font, but title with a 50% larger font size
Notes 4.1: CSS 12
SDPL 2003
CSS Box Model
Transcription maps document elements into nested rectangular boxes, which have
a core content area optional surrounding margin, border and padding areas controlled by corresponding properties margin, border and padding, and width and height (last two most useful for scaling images)
SDPL 2003
Notes 4.1: CSS
13
Dimensional properties of boxes
____________________________________ | margin (transparent) | | _______________________________ | | | border | | | | __________________________ | | | | | padding | | | | | | _____________________ | | | | | | | content | | | | | | | |_____________________| | | | | | |__________________________| | | | |_______________________________| | |____________________________________| | content width | | box width |
SDPL 2003 Notes 4.1: CSS 14
CSS1 Properties (2/2)
Box properties:
width, height, float, clear; margin, (-top/-right/-bottom/-left); padding, (-top/-right/-bottom/-left); border-width, (-top-/-right-/-bottom-/-left-); border-color, border-style; border, (-top/-right/-bottom/-left);
SDPL 2003
Notes 4.1: CSS
15
Boxes: Example
Box for chapter margin padding margin padding Content for title margin padding Content for section
maximum of vertically overlapping margins
SDPL 2003
Notes 4.1: CSS
16
Main types of elements
Inline elements (display:inline)
default; can occur on the same line with other elements; e.g., EM in HTML
Block-level
formatted as boxes separated by line breaks default formatting of, e.g., P,H1,H2 in HTML specified by display:block display:list-item -> block preceded by list-item marker
Element suppression: display:none
Notes 4.1: CSS 17
SDPL 2003
CSS Selectors: Simple
Application of style rules determined by matching selectors to elements of the document tree
Element type name, e.g. P or H1
matches any instance of the element type
CSS2 adds
a universal selector * matching any element tests for attributes:
fig[file="fig1.jpg"]: figure with given value for attribute file *[file="fig1.jpg"]: any element with that value for attribute file fig[file]: element fig with attribute file
Notes 4.1: CSS 18
SDPL 2003
CSS Selectors: Contextual
Element inclusion by listing simple selectors for ancestors
e.g: items in ordered lists in paragraphs: P OL LI { }
CSS2 adds
direct inclusion: Parent > Child conditions on siblings: E + A: element A preceded by an element satisfying selector E B:first-child: B as the first element child
SDPL 2003
Notes 4.1: CSS
19
Examples of CSS2 Selectors
Dont indent a P immediately following MATH:
MATH + P { text-indent: 0 }
Reduce vertical space btw an H1 and an H2 immediately following it:
H1 + H2 { margin-top: -5mm }
Dont indent the first P of a DIV:
DIV > P:first-child { text-indent: 0 }
SDPL 2003
Notes 4.1: CSS
20
Counters and generated content
CSS1 restricted to adorning elements with assigned style properties
+ automatic numbering of list items on a single level
CSS2 adds insertion of generated content before and after selected elements Example:
Number theorems within each chapter Precede each theorem by "Theorem" and its number Follow the theorem by a little box
SDPL 2003
Notes 4.1: CSS
21
Generated content: Example
Style rules for the task:
chapter { counter-reset: theorCntr } theorem:before { content: "Theorem " counter(theorCntr) ". "; counter-increment: theorCntr; font-weight: bold; } theorem:after { content: url("box.gif"); float: right}
Also possible to include attribute values of the selected element in generated content using attr(Name)
Notes 4.1: CSS 22
SDPL 2003
Limitations of CSS
Limited transcription capabilities
limited transposition of elements (float:left/right) calls of parameterised formatting tasks the major transcription type supported
In CSS1 context specification limited:
no sibling or parent/child relationships limited use of attributes (CSS1: only class) CSS2 more powerful, but
no access to elements children or content unable to access targets of cross references
SDPL 2003
Notes 4.1: CSS
23
Limitations of CSS
Non-programmable
no decision structures unable to store calculated quantities non-extensible > relatively simple
Western-language orientation (left-to-right) XSL allows unrestricted transformations of the document to precede a CSS-like formatting
Notes 4.1: CSS 24
SDPL 2003
Browser Implementations
CSS support in major browsers is rather discouraging (See, e.g., http://www.webreview.com/style/)
> full CSS not usable on the Internet (Almost) complete implementations of CSS1
Netscape Navigator 6
implements also most of CSS2 selectors
MS Internet Explorer 5 on Macintosh(!)
MS policy of developing own extensions, instead of completing conformance with accepted recommendations strongly criticised
SDPL 2003 Notes 4.1: CSS 25
