1. Cascading Style Sheets Tom Osman

2. Keep the content of a webpage separate from the formatting of the page. Structure (of content)  Headings  Sub headings  Paragraphs  A narrative that flows in a meaningful sequence from top of page to bottom of page Form  Font  Colour  Page layout Separating Form and Structure XHTML code (the web page) CSS (usually an external file; xxxx.css)

3. Advantages of separating Form and Content If the same CSS is applied to many web pages, then a single change to the CSS will affect all web pages.  Easy site maintenance  Great flexibility A user can substitute their own CSS for yours – good for a range of special needs; dyslexia, visual impairment, colour blindness etc.

4. What do CSS rules look like? h1{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 36px; font-weight: 400; color:#0066CC; } Redefines the appearance of the h1 tag body {background-color: #FFFFCC; } selector{property:value;} (pale yellow) All css rules end with a semi colon

5. How to attach an external style sheet to a web page Place a link to the style sheet in the section of the xhtml document The name (& path) of the css file Tells the browser that it is linking to a stylesheet Tells the browser what type of content the file contains

6. The W3C Box Model Precise positioning is crucial to the efficient use of CSS – make sure that you read and understand how this works. W3C Box Model http://www.w3.org/TR/REC-CSS2/box.html Interactive box Model Demo http://www.redmelon.net/tstme/box_model/ http://www.redmelon.net/tstme/box_model/

7. and xhtml tags The tag is a block level container; it can be treated like an object  Can have attributes; colour, font size, width etc.  Can be positioned on a web page with accuracy http://www.w3schools.com/tags/tag_div.asp The tag is an in line tag – e.g. used to apply a class to a fragment of text on a line. http://www.w3schools.com/tags/tag_span.asp

8. CSS and good graphic design CSS Zen Garden http://www.csszengarden.com

9. Comments or Questions?