CS 110 Computer Science and the Internet CSS
- Slides: 8
CS 110: Computer Science and the Internet CSS 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…
… and some house cleaning /* original CSS rules */ body { font-family: sans-serif; font-size: medium; } h 1 { color: maroon; background-color: white; } h 3 { color: blue; background-color: white; } li. optional { color: red; background-color: white; } /* new CSS for the american. Lit. html page */ body { font-family: sans-serif; font-size: medium; background-color: white; } h 1, h 2, h 3 { font-weight: normal; } h 1 { color: maroon; } h 3 { color: blue; }. optional { color: red; } Tips of the day: Create separate rules for the common and distinct properties of multiple tags Add comments!
CSS Box Model 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 p { color: maroon; background-color: pink; width: 200 px; padding: 20 px; border: 5 px dashed blue; margin: 50 px; }
Add structure with <div> HTML: <div class="week”> <h 3>Week 1: <em>The Romantic Movement</em></h 3> <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: 20 px; margin: 20 px; border: 2 px solid blue; width: 350 px; }
id vs. class HTML: <div id="header"> <h 1>American Poetry and Prose</h 1> </div> CSS: div#header { background-color: mistyrose; border-bottom: 4 px double maroon; border-top: 4 px double maroon; padding-left: 20 px; }
Centering things HTML: CSS: <div class="pets"> <p class="center"> Ellen's (evil) cat Cleopatra </p> <p class="center"> <img src="images/cleo. jpg" alt="Ellen's cat cleo"> </p> </div> p. center { text-align: center; } div. pets { width: 400 px; background-color: wheat; padding: 20 px 0; margin-left: auto; margin-right: auto; }
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/~cs 110/ellen/L 4_CSS_Box/american. Lit 3. html
