CSS Box Model <span> & <div> CS110: Computer Science and the Internet CSS Box Model <span> & <div> http://www.petervaldivia.com/technology/networks/index.php

Some style improvements… Introduce span, first for inline style: <span style=“color: red; background-color: white”>optional</span> Then create a new class of span element that is colored red HTML: <span class=“optional”>optional</span> external style sheet: span.optional { color: red; background-color: white; } For headers, add font-weight: normal; 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 /* 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; li.optional { color: red; Tips of the day: Create separate rules for the common and distinct properties of multiple tags Add comments! http://www.loop11.com/technology-update/

CSS Box Model box content margin padding width border color: maroon; background-color: pink; width: 200px; padding: 20px; border: 5px dashed blue; margin: 50px; } margin padding width box content border To understand page layout, you first have to understand that, to a web browser, a web page is a series of boxes. The boxes have a width and height, and they get assembled (laid out) on the page, much the way Ben Franklin might have laid out the text and pictures in his newpaper. Boxes come in two kinds: blocks and inline. A block is something big like a paragraph or a <div>. Blocks are preceded and followed by line breaks, so Ben Franklin or the layout engine stacks them vertically on the page. (Normally, a block doesn't have anything to the left or right, though we will see some exceptions later.) An inline element (box) is something like a word, where Ben Franklin or the layout engine fills up a line with as many as it can, then goes on to the next line, and so forth. You may be surprised to learn that <img> elements are inline, so that a line is filled with as many images as will fit before starting the next line. (That's why centering an image is tricky; we'll look at that a bit later.) 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: CSS: <h1>American Poetry and Prose</h1> <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; }

Centering things HTML: CSS: <div class="pets"> p.center { <p class="center"> Ellen's (evil) cat Cleopatra </p> <img src="images/cleo.jpg" alt="Ellen's cat cleo"> </div> CSS: p.center { text-align: center; } div.pets { width: 400px; background-color: wheat; padding: 20px 0 20px 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 There must be only one <div> with that id. For brevity, if there is only one element with that id, you can omit the element type, reducing the selector to just #navbar. View this page with Firebug: http://cs.wellesley.edu/~cs110/ellen/L4_CSS_Box/americanLit3.html