1. HTML with Style!

2. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser how to present information.

3. Style Assignment Syntax Target propertyvalueproperty2value2 p { background: YELLOW }

4. Identifying Targets 1 Selector Class IDDefines a style for a single element based on the element’s ID. (Avoid) Defines a style for all elements of a given class. Defines a style for all elements of a given type (e.g., all paragraphs).

5. Examples Selector Class ID Class ID

6. Identifying Targets 2 ContextualDefines a style based on the order of selectors, going from right to left. p em strong { background: YELLOW } p em { background: YELLOW }

7. Examples

9. Margin Basic Property Groups Font ₪Ω€ Text T he Background Padding The contents go here! Border Box Model

10. Internal Style Sheets

11. Local (Inline) Styles

12. External Style Sheets

13. CSS Order Matters 1 2 3 1

14. Why Style Sheets? +Flexible, powerful presentation. +Control – author, user, browser. +Clearly separates content and presentation. +Transition to future technologies. –Can get confusing (e.g., conflicts)

15. div And span Both group information. Great for formatting all sorts of elements! div –Block level. span –Inline.

16. We have just skimmed the surface of CSS! Feel free to explore. By the way, CSS3 is under development right now.