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 : (e.g. )

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 {..}  combinations p.para2 {... } table td.bluecell {..} #contentarea p {..}  pseudo-class selectors Types of selectorsAffected elements …

CASCADING STYLE SHEET Cascading Style Sheet Where to add styles? 1.External stylesheets 2.Embedded/internal stylesheet between.. tag 3.Inline styles style attribute

CASCADING STYLE SHEET Cascading Style Sheet  Cascading effect of multiple stylesheets;  Overriding order;  Inheritance;

CASCADING STYLE SHEET Cascading Style Sheet Cascading 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 Sheet Overriding 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 Sheet Overriding order: - which style wins? SelectorIDClassTagTotal p 0011.byline p.byline #banner #banner p #banner.byline

CASCADING STYLE SHEET Cascading Style Sheet Overriding order: - which style wins? Tiebreaker : Last style wins Written by Jean Graine de Pomme p a. { color: blue; } p.byline a { color: red; }

CASCADING STYLE SHEET Cascading Style Sheet Inheritance CSS properties applied to one tag are passed on to nested tags. tag inherits styles from (the parent tag) where applicable, unless re-styled explicitly otherwise. LI UL

CASCADING STYLE SHEET Cascading Style Sheet List of properties and values

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. Float 3.Absolute

CASCADING STYLE SHEET Cascading Style Sheet CSS positioning Positioning types: 1.Normal (relative) 2. Float 3.Absolute

CASCADING STYLE SHEET Assignment einstein.html Albert Einstein #rightbar 180px