1. CSS Styling CSS Box Model & CS110: Computer Science and the Internet

2. Some style improvements… How can we style the word “optional” to be red? While we’re at it, let’s tone down those bold headers…

3. Designing CSS rules (imagine lots more weeks on the webpage…) What tags need to be styled? Can we put all the CSS style rules in an external style sheet? h1 h2... First, let’s sketch out the elements: http://cs.wellesley.edu/~cs110/ellen/L3_CSS/americanLit.html

4. Classes We can define a new class of elements with red text: li.optional { color: red; background-color: white; } and use the class attribute to indicate that an element belongs to this class: Walt Whitman, Song of Myself

5. Inheritance So do we also need to define new classes of the element that are blue and red? No, because the nested elements inherit the properties of their “parent” element (let’s draw the inheritance tree) body h1 h2 h3 ul em li em ul li em Will see in firebug

6. … and some house cleaning /* original CSS rules */ body { font-family: sans-serif; font-size: medium; } h1 { color: maroon; background-color: white; } h3 { color: blue; background-color: white; } li.optional { color: red; background-color: white; } /* new CSS for the americanLit.html page */ body { font-family: sans-serif; font-size: medium; background-color: white; } h1, h2, h3 { font-weight: normal; } h1 { color: maroon; } h3 { color: blue; }.optional { color: red; } Tips of the day: Create separate rules for the common and distinct properties of multiple tags Add comments!

7. CSS Box Model p { color: maroon; background-color: pink; width: 200px; padding: 20px; border: 5px dashed blue; margin: 50px; } border margin padding box content width The top, bottom, left and right sides of the margin, padding and border can be styled differently to create many distinct appearances

8. Add structure with HTML: Week 1: The Romantic Movement Washington Irving, Rip Van Winkle Edgar Allen Poe, The Raven Walt Whitman, Song of Myself CSS: div.week { background-color: lavender; padding: 20px; margin: 20px; border: 2px solid blue; width: 350px; }

9. id vs. class HTML: American Poetry and Prose CSS: div#header { background-color: mistyrose; border-bottom: 4px double maroon; border-top: 4px double maroon; padding-left: 20px; } Remember reuse and modularity from the first day of class?

10. Which wins h2 { color: blue; } h2.required { color: red; } p { color: red; } #navbar { color: blue; }.required { color: red; } em { color: blue; } #quote_of_the_day { color: red; } p.quote_text { color: blue; }

11. Centering things HTML: Ellen's (evil) cat Cleopatra <img src="images/cleo.jpg" alt="Ellen's cat cleo"> CSS: p.center { text-align: center; } div.pets { width: 400px; background-color: wheat; padding: 20px 0 20px 0; margin-left: auto; margin-right: auto; }

12. Explore the Box Model with Firebug If Firebug is not installed in Firefox on your Mac: Select Add-ons from the Tools menu Enter firebug in the search box in the upper right corner Click on the link “See all 471 results” at the bottom of the page Move mouse to first item and click on “+ Add to Firefox” button Click on “Install Now” Select Firebug from the View menu to start View this page with Firebug: http://cs.wellesley.edu/~cs110/ellen/L4_CSS_Box/americanLit3.html