Cascading Style Sheets

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 • http://www.w3.org

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 { property1 : value1; property2 : value2; … propertyn : valuen } h1 {font-size: large; color : #009 }

Where do the rules go? • Separate file (with .css extension) • Use <link> element to attach style sheet to html file <link rel="stylesheet" type="text/css" href="myStyle.css" /> • In a <style type="text/css> element in the <head> of the HTML document

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

Style Element <html><head> <style type="text/css"> body { font-size: small } h1 {font-size: large; color: #009 } </style> </head><body> <h2>… </h2> </body></html>

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 • http://en.wikipedia.org/wiki/Cascading_Style_Sheets • W3 Schools • http://www.w3schools.com/css/default.asp • Complete CSS Guide (online version) • http://www.westciv.com/style_master/academy/css_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 • <link rel="shortcut icon" href="images/lwp.ico" type="image/x-icon" /> • <link rel="icon" href="images/lwp.ico" type="image/x-icon" />

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

Cascading Style Sheets