CSS Styling CSS Box Model <span> & <div>

CS110: Computer Science and the Internet CSS StylingCSS Box Model<span> & <div>

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…

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

Classes We can define a new class of <li> elements with red text: li.optional { color: red; background-color: white; } and use the classattribute to indicate that an <li> element belongs to this class: <li class=“optional”>Walt Whitman, <em>Song of Myself</em>

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

… and some house cleaning /* 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; } /* 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; } Tips of the day: Create separate rules for the common and distinct properties of multiple tags Add comments!

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

Add structure with <div> HTML: <div class="week”> <h3>Week 1: <em>The Romantic Movement</em></h3> <ul> <li>Washington Irving, <em>Rip Van Winkle</em> <li>Edgar Allen Poe, <em>The Raven</em> <li class="optional">Walt Whitman, <em>Song of Myself</em> </ul> </div> CSS: div.week{ background-color: lavender; padding: 20px; margin: 20px; border: 2px solid blue; width: 350px; }

id vs. class HTML: <div id="header"> <h1>American Poetry and Prose</h1> </div> 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?

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; }

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

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

CSS Styling CSS Box Model <span> & <div>