Scribd
Upload
77 views

4.1 CSS - Cascading Style Sheets: Main Ideas and Essential Features

CSS (Cascading Style Sheets) allows specifying the presentation of web pages by attaching styles like fonts, colors, and margins to HTML/XML documents. CSS level 1 defined basic features for HTML, level 2 added media types and extended selection mechanisms, and level 3 is ongoing work split into modules. Style rules use selectors to match elements and declarations to set property values. Properties control font, color, box model attributes, and more. Rules from different sources are merged, with inheritance and cascading determining applied values. CSS processing maps documents to boxes for formatting and rendering. Support in browsers is improving but not fully compliant with recommendations.

Uploaded by

Bharanidharan Kanagaraj
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
77 views

4.1 CSS - Cascading Style Sheets: Main Ideas and Essential Features

CSS (Cascading Style Sheets) allows specifying the presentation of web pages by attaching styles like fonts, colors, and margins to HTML/XML documents. CSS level 1 defined basic features for HTML, level 2 added media types and extended selection mechanisms, and level 3 is ongoing work split into modules. Style rules use selectors to match elements and declarations to set property values. Properties control font, color, box model attributes, and more. Rules from different sources are merged, with inheritance and cascading determining applied values. CSS processing maps documents to boxes for formatting and rendering. Support in browsers is improving but not fully compliant with recommendations.

Uploaded by

Bharanidharan Kanagaraj
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 25

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

You might also like