CSS Basic rules of CSS Pseudo-class of the A tag Apply CSS to alter an unordered list Cascading Style Sheets (CSS)

CSS

Basic rules of CSS

Pseudo-class of the A tag

Apply CSS to alter an unordered list

Cascading Style Sheets (CSS)

CASCADING STYLE SHEET

Background

♦ HTML was intended to deliver data/text content.

♦ Attributes & formatting elements make site maintenance unorderly.

♦ Solution: separate web-content from page-formatting Cascading Style Sheet

Reference : http://www.howtocreate.co.uk/tutorials/css/introduction

(e.g. <font>)

CASCADING STYLE SHEET

Cascading Style Sheet

selector1 { property : value }

selector2 {property1: value1;property2: value2

}

CASCADING STYLE SHEET

Cascading Style Sheet

type (tags)p {. .}table, ul {. .}

class.headings {. .}

id#contentarea {. .}

combinationsp.para2 {. . . }table td .bluecell {. .}#contentarea p {. .}

pseudo-class selectors

Types of selectors Affected elements

<p> </p><table> </table><ul> </ul>

<xx class="headings">…</xx>

<div id=“contentarea">…</div>

CASCADING STYLE SHEET

Cascading Style SheetWhere to add styles?

1. External stylesheets

<link rel="stylesheet" type="text/css" href="css/global.css">

2. Embedded/internal stylesheetbetween <style> . . </style> tag

3. Inline stylesstyle attribute<p style="text-align:center">

CASCADING STYLE SHEET

Cascading Style Sheet

Cascading effect of multiple stylesheets;

Overriding order;

Inheritance;

CASCADING STYLE SHEET

Cascading Style SheetCascading effect:

CSS properties can accumulate or add-up.

p {text-align: center;}

style1.css

p {color: red;}

style2.css

This paragraph is centre-aligned and

in red

CASCADING STYLE SHEET

Cascading Style SheetOverriding order:

- which style wins?

A tag selector is worth 1 point.

A class selector is worth 10 points.

An ID selector is worth 100 points.

An inline style is worth 1000 points

CASCADING STYLE SHEET

Cascading Style SheetOverriding order:

- which style wins?

Selector ID Class Tag Total

p 0 0 1 1

.byline 0 1 0 10

p.byline 0 1 1 11

#banner 1 0 0 100

#banner p 1 0 1 101

#banner .byline 1 1 0 110

CASCADING STYLE SHEET

Cascading Style SheetOverriding order:

- which style wins?

Tiebreaker : Last style wins

<p class="byline">Written by<a class="email" href="mailto:[email protected]">Jean Graine de Pomme</a></p>

<p class="byline">Written by<a class="email" href="mailto:[email protected]">Jean Graine de Pomme</a></p>

p a.email { color: blue; }p.byline a { color: red; }

CASCADING STYLE SHEET

Cascading Style SheetInheritance

CSS properties applied to one tag are passed on to nested tags.

<li> tag inherits styles from

<ul> (the parent tag) where applicable, unless re-styled explicitly otherwise.

LI

UL

CASCADING STYLE SHEET

Cascading Style Sheet

List of properties and values

http://www.eskimo.com/~bloo/indexdot/css/propindex/all.htm

CASCADING STYLE SHEET

Cascading Style Sheet

HTML elements : inline or block?

The BOX model – width, margin, border, padding

CASCADING STYLE SHEET

Cascading Style Sheet

CSS positioning

Positioning types:1. Normal (relative)

2. Float3. Absolute

http://www.brainjar.com/css/positioning/

CASCADING STYLE SHEET

Cascading Style Sheet

CSS positioning

Positioning types:1. Normal (relative)

2. Float3. Absolute

http://www.brainjar.com/css/positioning/

CASCADING STYLE SHEET

Assignment

einstein.html

Albert Einstein

#rightbar

180px