1. Designing Web Pages The case for CSS

2. The Power of CSS css Zen Garden http://www.csszengarden.com/ http://www.csszengarden.com/?cssfile=/189/189.css http://www.csszengarden.com/?cssfile=/191/191.css http://www.csszengarden.com/?cssfile=/188/188.css http://www.csszengarden.com/?cssfile=012/012.css http://www.csszengarden.com/?cssfile=008/008.css CSS In Action http://www.w3schools.com/css/demo_default.htm

3. Overview Description of CSS CSS Syntax CSS Formatting Options Grouping, Class Selectors, ID Selectors CSS Locations External Style Sheet, Internal Style Sheet, Inline Style Resources

4. What is CSS??? CSS stands for Cascading Style Sheets CSS added to HTML 4.0 to solve a problem HTML defines content of a document (,, etc.) CSS defines how to display the HTML content Styles are defined at four levels Browser defaults Within an external style sheet file (in a.css file) Within an internal style sheet (within ) Within an element (within, etc.)

5. CSS Syntax selector {property: value} body {color: white} p {font-family: "sans serif"} p {text-align:center;color:red} p { text-align: center; color: black; font-family: arial; }

6. CSS Grouping h1,h2,h3,h4,h5,h6 { color: green } p,tr,div { text-align: justify; border: 1 px; }

7. CSS Class Selectors p.right {text-align: right} This paragraph will be right-aligned..center {text-align: center} This heading will be center-aligned

8. CSS ID Selectors p#para1 { text-align: center; color: red } #green {color: green} This paragraph will be center-aligned and be on a red background.

9. External Style Sheet HTML File (.htm,.html) <link rel="stylesheet" type="text/css" href="mystyle.css" /> CSS File (.css) hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

10. Internal Style Sheet hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

11. Inline Styles This is a paragraph.

12. Resources CSS Home Page http://www.w3.org/Style/CSS/ CSS Tutorial http://www.w3schools.com/css/default.asp CSS Validator http://jigsaw.w3.org/css-validator/ CSS Crib Sheet http://www.mezzoblue.com/css/cribsheet/ CSS Cheat Sheet http://www.ilovejackdaniels.com/css/css-cheat-sheet/