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

2. 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. )

3. CASCADING STYLE SHEET Cascading Style Sheet selector1 { property : value } selector2 { property1: value1; property2: value2 }

4. 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 …

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

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

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

8. 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

9. CASCADING STYLE SHEET Cascading Style Sheet Overriding order: - which style wins? SelectorIDClassTagTotal p 0011.byline 01010 p.byline 01111 #banner 100100 #banner p 101101 #banner.byline 110110

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

11. 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

12. CASCADING STYLE SHEET Cascading Style Sheet List of properties and values http://www.eskimo.com/~bloo/indexdot/css/propindex/all.htm

13. CASCADING STYLE SHEET Cascading Style Sheet HTML elements : inline or block? The BOX model – width, margin, border, padding

14. CASCADING STYLE SHEET Cascading Style Sheet CSS positioning Positioning types: 1.Normal (relative) 2. Float 3.Absolute http://www.brainjar.com/css/positioning/

15. CASCADING STYLE SHEET Cascading Style Sheet CSS positioning Positioning types: 1.Normal (relative) 2. Float 3.Absolute http://www.brainjar.com/css/positioning/

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