1. Cascading Style Sheets Controlling the Display Of Web Content

2. Why use style sheets  Separate structure from presentation  HTML files less complex  One style sheet for an entire site keeps the styling consistent across different pages  Different users can have different style sheets  Can have different style sheets for different media (print vs. screen e.g.)

3. CSS Style Sheets  Style sheets are used to specify the presentation style of a web document.  Cascading Style Sheet (CSS) is a language for specifying presentation style  Overseen by W3C  http://www.w3.org http://www.w3.org

4. Components of CSS  Style declarations  property : value  Selectors determine which properties are assigned to different HTML elements  Inheritance and cascading rules control what properties affect child elements

5. Style Rule selector { property 1 : value 1 ; property 2 : value 2 ; … property n : value n } h1 {font-size: large; color : #009 }

6. Where do the rules go?  Separate file (with.css extension)  Use element to attach style sheet to html file  In a element in the of the HTML document

7. Attached Style Sheet <link rel="stylesheet" type="text/css" href="style.css"> … in style.css … h2 { font-size: 150% } …

8. Style Element body { font-size: small } h1 {font-size: large; color: #009 } …

9. Selectors  Element: comma-separated list of tag names  can use * to select all elements  Class: tag.classname to select all elements with class=classname  Attribute: tag[attr] or tag[attr="value"] to select elements with a particular attribute or attribute value

10. More selectors  Id : #idName to select elements with particular id attribute  Contextual: a img  Pseudoclass: :link :active :visited :hover  Pseudoelement: p:first-letter p:first-line

11. Properties  color and background - foreground and background color, image (with position and repeat)  text - color, spacing, alignment, decoration, indentation  font - size, style  box properties - margins, padding, borders (color, style, width)  classification - display (block, in-line, list), list markers, white-space handling

12. Margin, Border, Padding  Block boxes  Inline boxes

13. Sources  Wikipedia  http://en.wikipedia.org/wiki/Cascading_Style_Sheets http://en.wikipedia.org/wiki/Cascading_Style_Sheets  W3 Schools  http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp  Complete CSS Guide (online version)  http://www.westciv.com/style_master/academy/css_ tutorial/index.html http://www.westciv.com/style_master/academy/css_ tutorial/index.html  WDG Guide to Cascading Stylesheets  http://www.htmlhelp.com/reference/css/ http://www.htmlhelp.com/reference/css/

14. favicons  Make a custom icon that shows up in the title bar of the browser and in the bookmark list.  Create a 16x16 bit image file  acceptable formats: gif, png, the windows ico  Put it in your public_html directory  Add link element(s) to the head element 