4.1 CSS - Cascading Style Sheets

SDPL 2005 Notes 4.1: CSS 1

4.1 CSS - Cascading Style Sheets4.1 CSS - Cascading Style Sheets

Overview of main ideas and essential Overview of main ideas and essential featuresfeatures

» as a preliminary for XSL as a preliminary for XSL

– What is it?What is it?– Use and statusUse and status– Processing modelProcessing model– Rules, selectors, generated contentRules, selectors, generated content– Usability in practise Usability in practise


CSS - Cascading Style SheetsCSS - Cascading Style Sheets

A stylesheet languageA stylesheet language– mainly to specify the representation of web pages mainly to specify the representation of web pages

by attaching style (fonts, colours, margins, …) to by attaching style (fonts, colours, margins, …) to HTML/XML documentsHTML/XML documents

– also used for "WYSIWYG" presentation in some also used for "WYSIWYG" presentation in some commercial XML editors, e.g., commercial XML editors, e.g., » SofQuad SofQuad XMetal XMetal (of Corel; Windows)(of Corel; Windows)» MorphonMorphon (of Morphon Technologies; Java) (of Morphon Technologies; Java)


W3C CSS RecommendationsW3C CSS Recommendations

Level 1 (CSS1), Dec. 1996 (Rev. Jan. 1999)Level 1 (CSS1), Dec. 1996 (Rev. Jan. 1999)– basic features, from the point of view of HTMLbasic features, from the point of view of HTML

Level 2 (CSS2), May 1998Level 2 (CSS2), May 1998– different media types: paged, aural different media types: paged, aural – extended selection mechanismextended selection mechanism– generated content, automatic numberinggenerated content, automatic numbering– formatting of tables, … formatting of tables, …

Level 3 (CSS3)Level 3 (CSS3)– ongoing work; split into 26 modules in 05/2001ongoing work; split into 26 modules in 05/2001


CSS Style SheetsCSS Style Sheets

Style sheet is a set of Style sheet is a set of style rulesstyle rules Style rule syntax:Style rule syntax:

selector selector {{ declarations declarations }}– selectorselector locates elements affected by the rule locates elements affected by the rule

declarationsdeclarations syntax: syntax: propprop11::valval11;; … … ;; prop propnn::valvalnn

– sets values for style properties sets values for style properties – CSS1 defines about 50 properties, CSS1 defines about 50 properties,

CSS2 about 120CSS2 about 120


CSS Style RulesCSS Style Rules

Example rules:Example rules:

H1 H1 {color: blue}{color: blue} /* blue text for 1st-level heads *//* blue text for 1st-level heads */ H1H1,,H2H2,,H3 H3 {font-style:bold;}{font-style:bold;}/* bold for alternative heads *//* bold for alternative heads */

.CODE .CODE {font-family: monospace; {font-family: monospace; color: red } color: red }

/* for all elems with class="CODE" *//* for all elems with class="CODE" */


CSS1 Properties (1/2)CSS1 Properties (1/2)

Font properties:Font properties:fontfont, (, (-family-family//-style-style//-variant-variant//-weight-weight//-size-size))

Color and background properties:Color and background properties:colorcolor; ; backgroundbackground ( (-color-color//-image-image//-repeat-repeat//--

attachementattachement// -position-position))

Text properties:Text properties:word-spacingword-spacing, , letter-spacingletter-spacing, , text-decorationtext-decoration, ,

vertical-alignvertical-align, , text-transformtext-transform, , text-aligntext-align, , text-text-indentindent, , line-heightline-height

helvetica/serif/…helvetica/serif/…

normal/italic/obliquenormal/italic/oblique

normal/bold/bolder/ ...normal/bold/bolder/ ...

sub/super/...sub/super/...

left/right/center/justifyleft/right/center/justify



Box properties:Box properties:– for controlling size, margins, borders etc. of for controlling size, margins, borders etc. of

““boxesboxes” (see later)” (see later)

Classification properties:Classification properties:display display (values:(values: blockblock | | inlineinline | | list-itemlist-item | | nonenone)), ,

white-space white-space (values:(values: normalnormal | | prepre | | nowrapnowrap)), ,

list-stylelist-style, (, (-type-type//-image-image//-position-position))

inside/outsideinside/outsidedecimal/lower-alpha/decimal/lower-alpha/disk/...disk/...


Attaching CSS Style to HTMLAttaching CSS Style to HTML

Four ways:Four ways: 1. with a1. with a LINKLINK element; element; 2. with a2. with a STYLESTYLE element in document element in document HEADHEAD; ; 3. by an3. by an importimport mechanism; 4. in amechanism; 4. in a STYLESTYLE attributeattribute

<HTML><HEAD><TITLE>A sample page</TITLE><HTML><HEAD><TITLE>A sample page</TITLE><<LINKLINK REL="STYLESHEET" TYPE="text/css" REL="STYLESHEET" TYPE="text/css"

HREF="my_style.css" > HREF="my_style.css" ><<STYLESTYLE TYPE="text/css"> TYPE="text/css"> @import@import url(http://style.com/basic);url(http://style.com/basic); H1 H1 { color: blue }{ color: blue } </ </STYLESTYLE></HEAD>></HEAD> <BODY> <H1>Headline is blue</H1> <BODY> <H1>Headline is blue</H1> <P <P STYLESTYLE="="color: greencolor: green">but this is green.">but this is green. </BODY> </BODY></HTML></HTML>


Attaching CSS Style ...Attaching CSS Style ...

W3C Rec for linking styles to W3C Rec for linking styles to XMLXML:: <?<?xml-stylesheetxml-stylesheet href="example.css" href="example.css"

type="text/css" ?>type="text/css" ?>

Rules from different sources merged togetherRules from different sources merged together– including browser defaults and user preferencesincluding browser defaults and user preferences– Problems of this ”Problems of this ”cascadingcascading” (” (porrastusporrastus))

» author: blue background + user: blue textauthor: blue background + user: blue text ? ?» Should Should authorauthor have control of style? have control of style?

What if visually disabled user needs large font size?What if visually disabled user needs large font size?» Should Should useruser have control of style? What if readability have control of style? What if readability

depends on detailed size and placement of text?depends on detailed size and placement of text?


CSS Processing Model (simplified)CSS Processing Model (simplified)

0. Parse the document into a tree0. Parse the document into a tree1. Match style rules to elements of the tree1. Match style rules to elements of the tree

– annotate each element with a value assigned for annotate each element with a value assigned for each relevant propertyeach relevant property

» inheritance and, in case of competing rules, elaborate inheritance and, in case of competing rules, elaborate "cascade" rules applied to select which value is assigned"cascade" rules applied to select which value is assigned

2. Generate a formatting structure of the 2. Generate a formatting structure of the annotated document treeannotated document tree– consists of nested rectangular boxesconsists of nested rectangular boxes

3. Render the formatting structure3. Render the formatting structure– display, print, audio-synthesize, ...display, print, audio-synthesize, ...


Inheritance (1/2)Inheritance (1/2)

Most properties are inherited by subelementsMost properties are inherited by subelements– can be overriddencan be overridden– can be modified (e.g. increase indent, set font size can be modified (e.g. increase indent, set font size

to 150% of current)to 150% of current) Some non-inherited properties: Some non-inherited properties:

– backgroundbackground properties properties » by default shine through the boxes of decendantsby default shine through the boxes of decendants

– paddingpadding, , marginmargin and and borderborder properties properties» but they effect the placement of sub-elementsbut they effect the placement of sub-elements

(See CSS Box Model a bit later)(See CSS Box Model a bit later)


Inheritance (2/2)Inheritance (2/2)

Consider document fragmentConsider document fragment <chap><title>… </title><chap><title>… </title>

<section> … </section> <section> … </section></chap></chap>

and rulesand rules chap chap {{ font-size: 12pt; font-size: 12pt;

font-family: serif }font-family: serif } title title { font-size: 150% }{ font-size: 150% }

Now both Now both titletitle and and section section will be formatted will be formatted using a serif font, but using a serif font, but titletitle with a 50% larger font with a 50% larger font size size


CSS Box ModelCSS Box Model

Transcription maps document elements into Transcription maps document elements into nested rectangular boxes, which havenested rectangular boxes, which have– a core a core content areacontent area– optional surrounding optional surrounding marginmargin, , borderborder and and

paddingpadding areas areas– controlled by corresponding propertiescontrolled by corresponding properties

marginmargin, , borderborder and and paddingpadding,,and and widthwidth andand heightheight (last two most useful for scaling images) (last two most useful for scaling images)


Dimensional properties of boxesDimensional properties of boxes

________________________________________________________________________| margin (transparent) || margin (transparent) || _______________________________ || _______________________________ || | border | || | border | || | __________________________ | || | __________________________ | || | | padding | | || | | padding | | || | | _____________________ | | || | | _____________________ | | || | | | content | | | || | | | content | | | || | | |_____________________| | | || | | |_____________________| | | || | |__________________________| | || | |__________________________| | || |_______________________________| || |_______________________________| ||____________________________________||____________________________________| | content width || content width || box width || box width |



Box properties:Box properties:

widthwidth, , heightheight, , floatfloat, , clearclear;;

marginmargin, (, (-top-top//-right-right//-bottom-bottom//-left-left););

paddingpadding, (, (-top-top//-right-right//-bottom-bottom//-left-left););

border-widthborder-width, (, (-top--top-//-right--right-//-bottom--bottom-//-left--left-););

border-colorborder-color, , border-styleborder-style;;

borderborder, (, (-top-top//-right-right//-bottom-bottom//-left-left););


Boxes: ExampleBoxes: Example

B o x fo r chapter

C o ntent fo r title

C o ntent fo r sectio n

padding

paddingm argin

m argin

m arginpadding

maximum ofmaximum of(positive) (positive) vertically vertically adjoining adjoining margins margins


Main types of elementsMain types of elements

InlineInline elements ( elements (display:inlinedisplay:inline))– default; can occur on the same line with other default; can occur on the same line with other

elements; e.g., elements; e.g., EM EM in HTMLin HTML Block-levelBlock-level

– formatted as boxes separated by line breaksformatted as boxes separated by line breaks» default formatting of, e.g., default formatting of, e.g., P,H1,H2P,H1,H2 in HTMLin HTML

– specified by specified by display:blockdisplay:block– display:list-item display:list-item

block preceded by list-item markerblock preceded by list-item marker Element suppressionElement suppression: : display:nonedisplay:none


CSS Selectors: SimpleCSS Selectors: Simple

Application of style rules determined by matching Application of style rules determined by matching selectors to elements of the document treeselectors to elements of the document tree

Element type name, e.g. Element type name, e.g. P P oror H1 H1– matches any instance of the element typematches any instance of the element type

CSS Level 2 adds ... CSS Level 2 adds ... – a universal selector a universal selector ** matching any element matching any element– tests for attributes:tests for attributes:figfig[[filefile=="fig1.jpg""fig1.jpg"]]: :

figure with given value for attribute figure with given value for attribute filefile*[*[filefile=="fig1.jpg""fig1.jpg"]]: :

any element with that value for attributeany element with that value for attribute filefilefigfig[[filefile]]: : element element figfig with attribute with attribute file file


CSS Selectors: ContextualCSS Selectors: Contextual

Element inclusion, by listing simple selectors Element inclusion, by listing simple selectors for ancestorsfor ancestors– e.g: items in ordered lists in paragraphs:e.g: items in ordered lists in paragraphs:

P OL LI P OL LI { … }{ … } CSS2 adds ...CSS2 adds ...

– direct inclusion: direct inclusion: Parent Parent >> Child Child– conditions on siblings:conditions on siblings:E E ++ A: A: element element A A preceded by an element preceded by an element

satisfying selector satisfying selector E EBB:first-child:first-child: :

B B as the first element childas the first element child


Examples of CSS2 SelectorsExamples of CSS2 Selectors

Don’t indent a Don’t indent a PP immediately following immediately following MATHMATH::MATH MATH ++ P P { text-indent: 0 }{ text-indent: 0 }

Reduce vertical space btw an Reduce vertical space btw an H1H1 and an and an H2H2 immediately following it:immediately following it:

H1 H1 ++ H2 H2 { margin-top: -5mm }{ margin-top: -5mm }(as a special case, a negative value is added to (as a special case, a negative value is added to

positive adjoining margin above)positive adjoining margin above) Don’t indent the first Don’t indent the first PP of a of a DIVDIV::

DIV DIV >> P P:first-child { text-indent: :first-child { text-indent: 0 }0 }


Counters and generated contentCounters and generated content

CSS1 restricted to assigning style properties CSS1 restricted to assigning style properties to elementsto elements+ numbering list items on a single level+ numbering list items on a single level

CSS2 adds counters, and generated content CSS2 adds counters, and generated content before and after elementsbefore and after elements

Example: Example: – Number Number theoremtheorems within each s within each chapterchapter– Precede each theorem by "Precede each theorem by "TheoremTheorem" and its " and its

numbernumber– Follow the Follow the theoremtheorem by a little box by a little box


Generated content: ExampleGenerated content: Example

Style rules for the task:Style rules for the task:

chapter chapter { counter-reset: { counter-reset: theorCntrtheorCntr } }

theoremtheorem:before {:before {content: "content: "Theorem Theorem " "

counter(counter(theorCntrtheorCntr) ") ". . ";";counter-increment:counter-increment: theorCntr theorCntr;;font-weight: bold; }font-weight: bold; }

theoremtheorem:after { content: url(":after { content: url("box.gifbox.gif");"); float: right} float: right}


Inserting attribute valuesInserting attribute values

Also possible to include attribute values of the Also possible to include attribute values of the selected element in generated selected element in generated contentcontent using using attr(Name)attr(Name)

ExampleExample

Insert value of attribute Insert value of attribute ALTALT before images: before images:

IMGIMG:before { content: attr(:before { content: attr(ALTALT) }) }


Limitations of CSSLimitations of CSS

Limited transcription capabilitiesLimited transcription capabilities– limited transposition of elements limited transposition of elements

((float:leftfloat:left//rightright))– calls of parameterised formatting taskscalls of parameterised formatting tasks the major the major

transcription type supported transcription type supported In CSS1 context specification limited:In CSS1 context specification limited:

– no sibling or parent/child relationshipsno sibling or parent/child relationships– limited use of attributes (CSS1: only limited use of attributes (CSS1: only classclass))– CSS2 more powerful, but CSS2 more powerful, but

» no access to element’s children or contentno access to element’s children or content» unable to access targets of cross referencesunable to access targets of cross references


Limitations of CSSLimitations of CSS

Non-programmable Non-programmable – no decision structuresno decision structures– unable to store calculated quantitiesunable to store calculated quantities– non-extensiblenon-extensible– > relatively simple> relatively simple

Western-language orientation (left-to-right)Western-language orientation (left-to-right) XSL allows unrestricted transformations of XSL allows unrestricted transformations of

the document to precede a CSS-like the document to precede a CSS-like formattingformatting


Browser ImplementationsBrowser Implementations

Browser implementations lag behind CSS specsBrowser implementations lag behind CSS specs – for a review (out-dated; 2001), see for a review (out-dated; 2001), see

http://www.ddj.com/webreview/style/http://www.ddj.com/webreview/style/– Netscape Navigator 6 supports most of CSS2 selectorsNetscape Navigator 6 supports most of CSS2 selectors

For more recent announcements, seeFor more recent announcements, seehttp://www.w3.org/Style/CSS/#browsershttp://www.w3.org/Style/CSS/#browsers

Full CSS usable, if at all, only in controlled Full CSS usable, if at all, only in controlled environments (intranets) with known browsers environments (intranets) with known browsers

4.1 CSS - Cascading Style Sheets

Documents