4.1 css - cascading style sheets

SDPL 2004 Notes 4.1: CSS 1

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

Main ideas and essential featuresMain ideas and essential features» 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

Main usage:Main usage:– to specify the representation of web pages by to specify the representation of web pages by

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

– also used to specify a "WYSIWYG" presentation in also used to specify a "WYSIWYG" presentation in some commercial XML editors, e.g., some 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 typesdifferent media types

» paged media (for printing), paged media (for printing), » aural style sheets (for speech synthesis)aural style sheets (for speech synthesis)

– 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 in May 2001 into 26 modulesongoing work; split in May 2001 into 26 modules


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 rulesExample rules H1 H1 {color: blue}{color: blue} /* blue text for first-level HTML headers *//* blue text for first-level HTML headers */

H1H1,,H2H2,,H3 H3 {font-style:bold;}{font-style:bold;} /* Alternative selectors grouped together: *//* Alternative selectors grouped together: */

/* bold font for all HTML headers *//* bold font for all HTML headers */

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


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 ”Problems of ”cascadingcascading” ”

» 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, speak, ...display, print, speak, ...


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 of maximum of vertically vertically overlapping overlapping margins margins


Main types of elementsMain types of elements

Inline elements (Inline 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

CSS2 adds CSS2 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 addsCSS2 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 } 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 adorning elements with CSS1 restricted to adorning elements with assigned style propertiesassigned style properties+ automatic numbering of list items on a single level+ automatic numbering of list items on a single level

CSS2 adds insertion of generated content CSS2 adds insertion of generated content before and after selected elementsbefore and after selected 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 before images: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

CSS support in major browsers is rather discouragingCSS support in major browsers is rather discouraging (See, e.g., (See, e.g., http://www.ddj.com/webreview/style/http://www.ddj.com/webreview/style/))

– > full CSS not usable on the Internet> full CSS not usable on the Internet– (Almost) complete implementations of CSS1(Almost) complete implementations of CSS1

» Netscape Navigator 6Netscape Navigator 6 implements also most of CSS2 selectorsimplements also most of CSS2 selectors

» MS Internet Explorer 5 on Macintosh(!) MS Internet Explorer 5 on Macintosh(!) – MS policy of developing own extensions, instead of MS policy of developing own extensions, instead of

completing conformance with recommendations completing conformance with recommendations strongly criticisedstrongly criticised

4.1 css - cascading style sheets

Documents