Cascading Style Sheets Controlling the Display Of Web Content

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

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 

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

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

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

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

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

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

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

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

Margin, Border, Padding  Block boxes  Inline boxes

Sources  Wikipedia   W3 Schools   Complete CSS Guide (online version)  tutorial/index.html tutorial/index.html  WDG Guide to Cascading Stylesheets 

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 