1

Cascading Style Sheets(CSS)

DBI 2003

2

Overview of CSS

3

Same Page – Different Styles

• Look at W3C Core Style Sampler• How is it done?

Style declarations are in a separate fileThe HTML (or XML) document has a link to the

style sheet

• You can download and look at the Modernist style sheet

• The style for the H1 tag, as defined in modernist.css, is shown on the next slide

4

h1 {font-family: Impact, Arial Black, Helvetica Black, sans-serif;font-size-adjust: .46;font-size: 2.33em;font-weight: 400;font-style:normal;text-decoration: none;word-spacing: normal;letter-spacing: normal;text-transform:none;}

5

What is a Style?

• Font propertiesfamily, size, weight, style, variant

• Text propertiescolor, transform, decoration

• Backgroundbackground-color, background-image,

background-repeat, background-attachment, background-position, background

Property names appear in red

6

A Style is Also a Layout

• Text Layoutdirection, word-spacing, white-space, letter-

spacing, line-height, text-align, text-indent

• Elements as Boxesmargin-top (-bottom, -left, -right) padding-top (-bottom, -left, -right)border-width, border-color, border-style

• Positioning Boxes float, clear, display, vertical-alignposition, left, top, width, height, overflow,

visibility, clip, z-index

Property names appear in red

7

How and Where the Style is Described?

• The style is specified by style rules• The style rules appear either in the

document or in external files, called style sheets

• Inside a document, there are inline styles and embedded style sheets

• External style sheets are either linked or imported

8

Cascading of Styles

• CSS merges style rules from different places (inline, document-level, imported and linked)

• Different places may have conflicting style rules

• The process of merging (“cascading”) styles from different places determines which style rules have priority

9

Overview of the Layout Process in CSS

• Think of each word as a rectangular box

• The natural layout of the boxes is left to righttop to bottom

• Think of each HTML (or XML) element as a big box that contains smaller boxes (e.g., words)

10

The Layout of Big Boxes

• Big boxes are also laid out left-to-right, top-to-bottom

• Inside each big box, the smaller boxes are laid out similarly

• This is a simplified description of the layout process

• Actually, there are more options than just the natural document flow

11

Layout in HTML vs. CSS

• In pure HTML, the only way to control the positions of elements is by using tablesIt is cumbersome to control positions

in this wayRendering tables in a browser may

take some time (check out this page)• CSS makes it easy to position

elements on a page

12

Relative vs. Absolute

• In CSS, positions (of boxes) and sizes (of fonts and boxes) could be either relative or absolute

• In an “absolute” styleFont size is fixedSizes and positions of elements are fixed

• In a “relative” style you can change the font sizeThe sizes and positions of elements may

change when the size of the window is changed

13

Examples of Relative vs. Absolute

• www.ynet.co.il (like most newspapers) has an “absolute” design Is it possible to change the font size? Is it possible to view more material if you

have a wide screen?

• www.useit.com has a “relative” designYou can change the size of the fontsThe width of the two columns is adjusted

according to the width of the browser window

14

Design Tip

• Make your design as “relative” as possible, sinceThe Web is not WYSIWYG because of the

variability in supported platforms• 21-inch monitor• Laptop• Hand-held device

• In other words, site designers and page authors should not try to fully control how their pages will be viewed

15

In Particular

• Site designers and page authors should not override the the style rules of the client (although it can be done)

16

Different Levels of CSS

• W3C has specifications for CSS Level 1, CSS Level 2 and CSS Level 3

• Most recent versions of browsers try to implement CSS Level 2

• Hardly any browser implements CSS Level 2 completely and correctly

• You should try your style sheets on different browsers, especially if you use complex features of CSS

17

Design Tip

• Design your site so that it will be rendered reasonably well also on browsers that do not support CSS

18

Examples and Resources

• Suppose you want to fix your logo on the background – look at an example

• W3Schools has many simple examples and a good CSS2 reference

• Many tutorials on the Web (e.g., Mulder's Stylesheets Tutorial)

• Eric Costello describes layout techniques using CSS and has links to tutorials and other resources on layout techniques

19

CSS Rules

20

Declarations• A declaration consists of a property

and one or more values• The property is separated from the

values by a colonproperty1: value1property2: value1 value2 value3

• Slides 5 and 6 list many of (but not all) the properties of CSS

• See a list of properties and their possible values in W3Schools

21

Declaration Blocks

• A declaration block is a list of zero or more declarations that are separated by semicolons:

• A declaration block usually appears inside a pair of { and }

• In in-line styles, a declaration block appears inside a pair of double quotes“declaration block”

property1: value1; property2: value1 value2 value3…;

22

Examples

• color: red; font-size: 12pt• margin-top: auto; margin-right:

100px; margin-bottom: 10%; margin-left: 5mm

• Alternatively, we can set all four margins in one declaration as follows

• margin: auto 100px 10% 5mm

23

Inline Styles

• In an inline style, the declaration block appears as the value of the attribute style (conforming to XML syntax)

<P style=“color: green; font-size: 1.5em; font-style: italic”> This text will be shown in italic green and the size will be 1.5 times the current font size </P>

24

CSS Rules

• A rule has the following formselector {declaration block}

• The selector determines when the rule is applied

• The following rule applies to text that is inside a <P> tag

P {color: green; font-size: 1.5em; font-style: italic}

25

Several Kinds of Selectors• Universal Selector• Type Selectors• Descendant Selectors• Child Selectors• Adjacent-Sibling Selectors• Attribute Selectors• Class Selectors• ID Selectors• Pseudo-Class Selectors• Pseudo-Element Selectors

Selectors can be grouped

26

Type Selector• A type selector is the name of an

element type• A type selector matches every

instance of the element type

• What will be the color and the size if the font is inside a <P> element which is inside a <DIV> element?

P {color: green; font-size: 1.5em; font-style: italic}DIV {color: red; font-size: 16px}

27

Universal Selector

• The universal selector matches every element type

• The following rule means that all the text will have a size of 40px

* {font-size: 40px}But even that may not work

• The following will always work* {font-size: 40px ! important}

28

Class Selectors

• The definition of the class<P class="introductoryparagraph"> ....

</P>• Style rules for the class

P.introductoryparagraph {color: blue}• applies to P elements with the class name

introductorypargraph.introductoryparagraph {color: blue}

• applies to any element with the class name introductoryparagraph

29

Class Selectors (cont’d)

• An element may have more than one class, e.g., <P class="green quote new”>

• This element matches the following selectors

•P.quote.green•P.new•P.quote.new.green •It does not match P.new.old

• Few browsers support it

30

ID Selectors

• IDs are identical to classes, except that there can only be one element with a given ID in a document

• In the HTML (or XML) document:<BODY id="introduction">

• In the style sheet:BODY#introduction {font-size: 1.2em}#introduction {font-size: 1.2em}

31

Attribute Selectors

• P[attribute] matches P when attribute is set to any value

• P[title=intro] or P[title="intro"] (the quotes are optional) matches P when its title attribute is set to

"intro"

• P[class~=green] matches P when the class attribute is set to

"green small", "small green", "green", etc.

32

Pseudo-Classes

• The pseudo-classes :link and :visited are used to define styles for links and visited links

• :hover is used to define a style for an element when the mouse is over that element

• :focus is used to define a style when the element is ready to accept input

• :active is used while an element is being activated by the user (during the time between pressing the mouse button and releasing it or pressing it again in a different place)

33

Examples of Rules for Pseudo-Classes

• A:link {color: blue}

• A:visited {color: purple}

• A:hover {font-size: 1.5em}

• A:active {color: red}

• INPUT:focus {background-color: yellow}

For links, the order of the rules is important

From a usability point of view, it is not recommend to change the default colors of :link and :visited

34

More Examples of Pseudo-Classes

• Look at the examples in W3Schools

35

The :first-child Pseudo-Class

• It is used to denote an element which is the first child of its parent

<OL><LI>This is the first child of OL – it is matched by the selector LI:first-child

<LI>This is the second child of OL – it is not matched by the above selector</OL>

36

Pseudo-Elements

• A pseudo-element selector matches part of an element (whereas a pseudo-class selector matches a complete element)

• :first-line and :first-letter match the first line and the first letter of an element, respectively

• Examples:P:first-line {text-transform: capitalize}

P:first-letter {font-size: 48px; color: red}

37

Contextual Selector

• P B {color: red}• The above rule is matched by a B

element if that element is nested (at any level) inside a P element

38

Grouping of Selectors

• The following rule applies to all elements of that match either H1, H2, H3 or P BP B, H1, H2, H3 {font-size: 120%}

39

Example<HTML><HEAD><TITLE>Formatting style with CSS</TITLE></HEAD><BODY><IMG SRC="tomato.gif"><H1>A joke</H1><P> A mama tomato, a papa tomato and a baby tomato are walking down the street.The baby tomato keeps falling behind so the papa tomato goes back, steps on the baby tomato and says, ketchup ("Catch-up!").

</P> </BODY></HTML>

40

41

Adding Style<STYLE type="text/css"><!--

BODY { background-image: url("tomato1.gif"); background-attachment: fixed }

H1 { background-color: rgb(100,150,100); color: rgb(250, 200, 250) }

P { background-color: yellow; color: purple; font-size: 200% }

--></STYLE>

42

43

Another Example

44

<HEAD><TITLE>Some more style examples</TITLE></HEAD><style TYPE=text/css><!--

BODY {font-size: 30}P:first-line {color: #ff0000;font-variant: small-caps}

--></style><BODY><SPAN style="float: left; font-size: 100px; line-height: 90px; width: 60px">T</SPAN>wo cows were walking together in a field. One turns to the other and says, "hey larry are you worried about getting that mad cow disease?"

<P>Larry, in a very odd and wacky voice says, <SPAN style="text-decoration: underline">"why would I, I'm a chicken?"</SPAN><SPAN style="text-decoration: line-through">"why would I, I'm a cow?"</SPAN></BODY></HTML>

45

46

The Sources of Style Sheets

47

Embedded Style Sheets

<HTML> <HEAD> <STYLE type="text/css"> <!-- BODY {color: red} --> </STYLE> </HEAD> <BODY> ... </BODY> </HTML>

The embedded style sheet appears in the header inside a <STYLE> element.

All the text of the style sheet is inside an HTML comment so that browsers that do not support CSS will ignore the text.

48

Inline Styles

• Any tag, except the <HTML> tag itself, can have the style attribute

• For example, the following will define the color of the paragraph to be green

<P style="color: green"> and this is green</P>

49

Imported Style Sheets

• The @import rule imports style rules to the beginning of the style sheet

• Usage: @import url(nameOfFile.css)• Several import rules may appear at

the beginning of the style sheet• Import rules can appear in embedded

style sheets or in external style sheets

50

Linked Style Sheets

• Links to external style sheets can appear in the header of an HTML page

<HTML> <HEAD> <LINK rel="stylesheet" type="text/css”

href=“name.css“ media=“print handheld”> </HEAD> <BODY> ... </BODY></HTML>

51

Inheritance and Cascading

52

Inheritance of Properties

• If an element does not match any rule for some given property, then the element inherits the computed value for that property from its parent element

53

Example

• Given the rules:BODY { font-size: 10pt }H1 { font-size: 120% }

• What will be the font size of the EM element?

<BODY> <H1>A <EM>large</EM>

heading</H1></BODY>

54

Cascading Order

• When several rules define the same property and match the same element, then the cascading order is as follows:Primary sort: weight and originSecondary sort: specificity of selectorsFinal sort: order of appearance

• The cascading order determines which rules applies

55

Weight and Origin

• Author style sheets override user style sheets

• User style sheets override default (browser) style sheets

• ! important declaration overrides normal declaration

• If both author and user declarations have ! important, the user declarations still override the author declarations (in CSS2, but not in CSS1)

56

Specificity of a Selector

• Let a be the number of ID attributes in the given selector

• Let b be the number of attributes and pseudo-classes in the given selector

• Let c be the number of element names in the given selector

• Sort the triples (a,b,c) lexicographically)

• Pseudo-elements are ignored

57

Example

• Consider the two rulesP {…}.introductory {…}

• If an element matches both, then the second rule has a higher specificity and overrides the first

58

Order of Appearance

• If two rules have the same weight, origin and specificity, then the one that appears last in the style sheet overrides the others

• Rules in imported style sheets are considered to appear before local rules