1. Part 1: CSS - Why? - How it works - Writing rules - Examples

2. Why style sheets?

3. Without stylesheets proprietary HTML extensions making text into images proliferate use of "spacer" GIF images deprecated HTML elements and/or attributes using tables for layout General lack of flexibility

4. Stylesheets HTML for content CSS for presentation

5. With stylesheets Separation of content and presentation Increased flexibility Increased accessibility Simple yet powerful

6. Example The Zen Garden (showcasing various CSS styles) http://www.csszengarden.com/ W3 core stylesheets: http://www.w3.org/StyleSheets/Core/ Doing it ourselves …

7. It ’ s in all in the head!

8. Three levels of separation 1.style attribute 2.style element 3.Link element

9. 1. Style attribute This is a paragraph formatted using CSS.

10. 2. Style element In head: p { color: red; font-family: helvetica; } In body: This is a paragraph formatted using CSS.

11. 3. Link element In head: In style.css: p{ color: red; font-family: helvetica; }

12. CSS Rules

13. CSS Rule Rule p { color: red;} Selectors and Declarations p{ color: red;} Selector: p Declaration : {color: red;} Properties and Values color: red Property: color Value : red

14. Combining rules p{color: red;} p{font-family: helvetica;} ⇕ p{ color: red; font-family: helvetica; }

15. Combining selectors h1 {color: red;} h2 {color: red;} h3 {color: red;} h4 {color: red;} ⇕ h1, h2, h3, h4 {color: red;}

16. Inheritance What happens if you have (head): body {color:blue;} em {color: red;} And (body): Here’s a short paragraph.

17. Inheritance Rules are inherited from parent Unless overwritten specifically

18. Problem Ex: different “ types ” of paragraphs

19. Solution id and class

20. id In the head: p{color:black;} #quote{font-style:italic;} In the body: Here's a short paragraph formatted in a standard way. Here's a type of paragraph that is intended to be displayed in italic.

21. class In the head: p{color:black;}.quote{font-style:italic;} In the body: Here's a short paragraph formatted in a standard way. Here's a type of paragraph that is intended to be displayed in italic. Here's a section of text. Using a unique class identifier, the previous paragraph and the current div share the same formatting property.

22. Differences between class and id id applies to a single element, class to any element Only one id per element, several classes per element These rules are not enforced by all browsers, but that’s no help when you’re designing a site.

23. Problem Ex: format all children of in a particular way

24. Solution Contextual selectors

25. In the head: div em{color: blue;} p em{color: green;} In the body: Here is one context for this em tag. Here is another context for this em tag.

26. Problem Ex: I want links NOT to be underlined, except when the mouse hovers over them.

27. Solution Pseudo-classes

28. Used to represent properties of a limited number of elements: Used essentially for links Selector:pseudo-class {property: value;}

29. Pseudo-classes In the head: a:link {text-decoration:none;} a:visited {color: #aaaaaa;} a:hover {text-decoration: underline;} a:active {color: red;} n.b. The order "link, visited, hover, active" is critical. In the body: The style of this link uses pseudo-classes.

30. Pseudo-elements Similar to pseudo-classes Limited scope: – :first-letter – :first-line

31. Summary selector #id.class :pseudo-class

32. Question Why cascading?

33. Cascading Stylesheet Publisher/reader Inheritance Order (last rule has priority) Implication: Prefer relative to absolute values.

34. Writing rules You know how it works You simply have to write rules: property: value http://www.w3schools.com/css/

35. Property:value pairs References: - W3schools http://www.w3schools.com/css/css_reference.asp - W3C http://www.w3.org/TR/CSS21/