CSS: Cascading Style CSS: Cascading Style SheetsSheets

Part II

Style SyntaxStyle Syntax

3

Style RulesStyle Rulesh1 {

color: purple;

font-family: Impact, Arial Black;

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; }

Declaration

Property

Value(s)

Selector

4

Style Rules (cont)Style Rules (cont)

• A rule has the following form

selector {declaration block}

• The selector determines when the rule is applied

• For example, the following rule applies to text that is inside a <p> tag

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

5

What Kind of Properties can a CSS What Kind of Properties can a CSS Style Sheet Change?Style Sheet Change?

• Style properties

• Layout properties

• There are many properties and many possible values- We will not cover all of them here

- Everything is in the Web !

- A good source: http://www.w3schools.com/css

Style PropertiesStyle Properties

7

Our ExamplesOur Examples

• We use the following HTML example: This is <span> our example </span> for css.

• The <span> tag is used to group elements for formatting with styles- Extremely useful tag...

8

Font PropertiesFont Properties

• Font properties: family, size, weight, style, variant, ...

span {

font-family: courier;

font-size: 130%;

font-style: italic;

font-weight: bold}

9

Text PropertiesText Properties

• Text properties: color, transform, decoration, …

span {

color: #00cc00;

text-decoration: line-through;

text-transform: uppercase}

10

Background PropertiesBackground Properties

• Background properties: background-color, background-image, …

span {background-color: #00ff00}

span {background-image: url('bg.gif');}

Layout PropertiesLayout Properties

12

Page LayoutPage Layout

• Each HTML element defines a layer (rectangular box) that is placed in some location on the page

• Layers are nested with correspondence to the nesting of their elements

13

Inline vs. Block ElementsInline vs. Block Elements

• There are two types of elements:

• Block elements: p, ol, table, div, h1, etc.

• Inline elements: b, i, a, span, cite, etc.

• Layers of block elements are separated from their adjacent elements (i.e., a new line before and after), while inline elements are not

• You can turn a block into an inline and vice-versa, using the display property, e.g., h1 { display: inline }

14

Positioning ElementsPositioning Elements

• Using CSS, you can define the position of an element inside its parent layer

• For that, use the properties position, left, right, top and bottom

span {

position:relative;

left: 1cm;

top: 1cm;

color: #00cc00;}

15

Position TypesPosition Types

• But 1cm left to what??

• For that, we have the position property

• Four position types:- static: the default position

- absolute: relative to the parent layer coordinates

- relative: relative to the static position

- fixed: relative to the window coordinates

16

Position ExamplesPosition Examples

span {

position:absolute;

left: 1cm;

top: 1cm;

color: #00cc00;} span {

position:fixed;

left: 1cm;

top: 1cm;

color: #00cc00;}

17

Position ExamplesPosition Examples

span {

position:static;

left: 1cm;

top: 1cm;

color: #00cc00;}

Totally Ignored! This is the

default position type

18

More Layout PropertiesMore Layout Properties

• Layer properties- margin-top (-bottom, -left, -right)

- padding-top (-bottom, -left, -right)

- border-width (-color, -style, … )

• Text Layout- direction, word-spacing, white-space, letter-

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

19

Length UnitsLength Units

• CSS has several types of length units:- em, ex: height of current fonts (relative)

- px, in, cm, mm, pt, pc: international units

- %: ratio of parent’s respective dimension

• A page should remain a proper layout when windows (and even fonts) resize- Hence, do not assume anything about default sizes

Selector TypesSelector Types

21

Several Kinds of SelectorsSeveral Kinds of Selectors

• Type Selectors

• Class Selectors

• ID Selectors

• Attribute Selectors

• Universal Selector

• Child Selectors

• Adjacent-Sibling Selectors

• Descendant Selectors

• Pseudo-Class Selectors

• Pseudo-Element Selectors

Not supported by IE 5, 5.5 and 6

22

Type SelectorType Selector

• A type selector is the name of an element type

• A type selector matches every instance of the element type

LI {color: red; font-size: 16px}

Matches:<ol>

<li> An item </li>

<li class="reditem"> Another item </li>

</ol>

23

Class SelectorClass Selector

• A class selector is a selector of the form x.y

• It matches xs that have the class attribute with value y

LI.reditem {color: red}

Matches:<ol>

<li> An item </li>

<li class="reditem"> Another item </li>

</ol>

.reditem { color: red} will also work!

24

ID SelectorsID Selectors

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

LI#23 {color: red}

Matches:<ol>

<li> An item </li>

<li id="23"> Another item </li>

</ol>

#23 { color: red} will also work!

25

Attribute SelectorsAttribute 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 value includes the word “green”

26

Universal SelectorUniversal Selector

• The universal selector matches every element

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

* {font-size: 40px }

27

Descendant SelectorDescendant Selector

• A descendant selector has the form S1 S2 where

S1 and S2 are selectors

• It matches all elements that

- match S2, and

- are descendants (nested in) elements that match S1

28

An ExampleAn Example

.href em {color: blue}

Matches: This is <em>not blue</em>.

<p>

This is <em> blue </em>

<span><i>and so is <em> this </em></i></span>.

</p>

What will this match?

p em {color: blue}

29

Pseudo-ClassesPseudo-Classes

• Pseudo class selectors are similar to class selectors, but they match states rather than class values - For example, a link can be in the states: visited,

active, mouse-over (“hover”), etc.

- Another example: a text-area can be focused

30

Examples of Rules for Examples of Rules for Pseudo-ClassesPseudo-Classes

• A:link {color: blue}

• A:visited {color: purple}

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

• A:active {color: red}

• INPUT:focus {background-color: yellow}

31

Grouping SelectorsGrouping Selectors

• We can group several declarations by specifying several selectors, separated by commas

• For example, the following rule applies to all elements that match either H1, P B, or H2[class=largehead]

P B, H1, H2.largehead {font-size: 120%}

32

Adding Style to Inner TextAdding Style to Inner Text

• We want to add style to a fragment of some text

• We need to wrap the text with tags that do not have a style of their own:- <SPAN> Some text </SPAN> : does not stop the

text flow

- <DIV> Some text </DIV>: separated from the other text

Cascading and Inheritance Cascading and Inheritance

34

Cascading of StylesCascading of Styles

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

• Different places may have conflicting style rules- conflicts may even arise in a single source

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

35

Determining Property ValuesDetermining Property Values

• Suppose that we would like to determine the value of property p for element e

• Choose all declarations that have a selector that matches e and have the property p

• Choose the first declaration in the cascading order, and apply the corresponding rule

36

Cascading OrderCascading Order

The cascading order of declarations:

1. Primary sort: weight and origin

2. Secondary sort: class

3. Third sort: specificity of selectors

4. Final sort: order of appearance

37

Weight and OriginWeight and OriginA style defined “closer” to a tag takes precedence: • 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 author declarations still override the user declarations

38

Example (sort by class)Example (sort by class)

• Consider the two rules

- P {…}

- .introductory {…}

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

39

An Example (specificity of selectors)An Example (specificity of selectors)

• Consider the following rules:- li {…}

- #x34y {…}

- ul ol li.red {…}

• Which is the most specific?

40

Order of AppearanceOrder of Appearance

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

• Rules in imported style sheets (@import) are considered to appear before local rules

41

Inheritance of PropertiesInheritance 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

• For example, color, font and word-spacing are inherited

• Yet border, margin and padding are not!

42

An Example (1)An Example (1)

• 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>

Computed Value: 12pt

43

An Example (2)An Example (2)• Given the rules:

- body { font-size: 10pt; color=red; }

- h1 { font-size: 120% }

• What will be the font color of the <h1> element?

<body> <h1>A red heading ? </h1></body>

44

Inheritance of PropertiesInheritance of Properties• If some properties have been set for the same

selector in different style sheets, the values will be inherited from the more specific style sheet. 

Example:

Result (properties for h3 in the document): color :redtext-align : rightfont_size:20 pt

external: H3 { color : red;

text-align : left;font-size : 8 pt; }

internal: H3 {

text-align : right;font-size : 20 pt; }

45

The End!The End!

These slides are based on those developed for the course: http://www.cs.huji.ac.il/~dbi

More information about CSS can be found at: http://www.w3schools.com/css/default.asp

http://www.htmlhelp.com/reference/css/ http://www.htmlgoodies.com/beyond/css/