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

2. 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…

3. … 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!

4. 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

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

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

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

8. 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: