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  background - color, image (with position and repeat)  text - color, background color, spacing, alignment, decoration, indentation  borders - color, style, width  font - size, style  margins and padding - each side independently if desired  lists - markers

Margin, Border, Padding  Block boxes  Inline boxes

Sources  Web Design and Programming by Paul S. Wang and Sanda S. Katila  Wikipedia   W3 Schools   Complete CSS Guide (online version)  tutorial/index.html

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 

How to make an ico image  Create a 16x16 image that you can open with gimp (or create it in gimp if you know how)  From gimp, do save as with a.ppm extension  do ppmtowinicon -output image.ico image.ppm