<!--#include virtual="commontop.html" -->
<title>Web Programming Step by Step, Lecture 4: Page Sections and the CSS Box Model</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1><em>Web Programming Step by Step</em>, Lecture 4</h1>
<h2>Page Sections and the CSS Box Model</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1><a href="http://www.webstepbook.com/">Web Programming Step by Step</a></h1>
<h3>Lecture 4 <br /> Page Sections and the CSS Box Model</h3>
<h4>Reading: 4.1 - 4.2; 4.4.1</h4>
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide titleslide">
<h1>4.1: Styling Page Sections</h1>
<ul>
<li>
<strong>4.1: Styling Page Sections</strong>
</li>
<li>
4.2: Introduction to Layout
</li>
<li>
4.3: Floating Elements
</li>
<li>
4.4: Sizing and Positioning
</li>
</ul>
</div>
<div class="slide">
<h1>Motivation for page sections</h1>
<p class="description" style="float: right; width: 50%; margin-left: 1em">
<img src="images/ultimate.png" alt="flow" style="max-width: 100%" />
</p>
<ul>
<li>want to be able to <strong>style individual elements, groups of elements, sections of text</strong> or of the page</li>
<li>(later) want to create complex page layouts</li>
</ul>
<p style="clear: right"></p>
</div>
<div class="slide">
<h1>
The HTML <code>id</code> attribute
<span class="readingsection">(3.2.2)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<p>Spatula City! Spatula City!</p>
<p <em>id="mission"</em>>Our mission is to provide the most
spectacular spatulas and splurge on our specials until our
customers <q>esplode</q> with splendor!</p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>allows you to give a unique ID to any element on a page</li>
<li>each ID must be unique; can only be used once in the page</li>
</ul>
</div>
<div class="slide">
<h1>Linking to sections of a web page</h1>
<div class="example">
<pre class="examplecode html">
<p>Visit <a href=
"http://www.textpad.com/download/index.html<em>#downloads</em>">
textpad.com</a> to get the TextPad editor.</p>
<p><a href="<em>#mission</em>">View our Mission Statement</a></p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>a link target can include an ID at the end, preceded by a <code>#</code></li>
<li>browser will load that page and scroll to element with given ID</li>
</ul>
</div>
<div class="slide">
<h1>CSS ID selectors</h1>
<div class="example">
<pre class="examplecode css">
<em>#mission</em> {
font-style: italic;
font-family: "Garamond", "Century Gothic", serif;
}
</pre>
<div class="exampleoutput insertoutput">
<p>Spatula City! <a href="http://www.youtube.com/watch?v=2XbCWmY0eqY" style="text-decoration: none">Spatula City!</a></p>
<p id="mission">Our mission is to provide the most
spectacular spatulas and splurge on our specials until our
customers <q>esplode</q> with splendor!</p>
</div>
</div>
<ul>
<li>applies style only to the paragraph that has the ID of <code>mission</code></li>
<li>
element can be specified explicitly: <code><strong>p</strong>#mission {</code>
</li>
</ul>
</div>
<div class="slide">
<h1>
The HTML <code>class</code> attribute
<span class="readingsection">(3.2.3)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<p <em>class="shout"</em>>Spatula City! Spatula City!</p>
<p <em>class="special"</em>>See our spectacular spatula specials!</p>
<p <em>class="special"</em>>Today only: satisfaction guaranteed.</p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>classes are a way to group some elements and give a style to only that group<br />(<q>I don't want ALL paragraphs to be yellow, just these three...</q>)</li>
<li>unlike an <code>id</code>, a <code>class</code> can be reused as much as you like on the page</li>
</ul>
</div>
<div class="slide">
<h1>CSS class selectors</h1>
<div class="example">
<pre class="examplecode css">
<em>.special</em> { <span class="comment">/* any element with class="special" */</span>
background-color: yellow;
font-weight: bold;
}
<em>p</em>.shout { <span class="comment">/* only p elements with class="special" */</span>
color: red;
font-family: cursive;
}
</pre>
<div class="exampleoutput insertoutput">
<p class="shout">Spatula City! Spatula City!</p>
<p class="special">See our spectacular spatula specials!</p>
<p class="special">Today only: satisfaction guaranteed.</p>
</div>
</div>
<ul>
<li>applies rule to any element with class <code>special</code>, or a <code>p</code> with class <code>shout</code></li>
</ul>
</div>
<div class="slide">
<h1>Multiple classes</h1>
<div class="example">
<pre class="examplecode html">
<h2 <em>class="shout"</em>>Spatula City! Spatula City!</h2>
<p class="special">See our spectacular spatula specials!</p>
<p <em>class="special shout"</em>>Satisfaction guaranteed.</p>
<p <em>class="shout"</em>>We'll beat any advertised price!</p>
</pre>
<div class="exampleoutput">
<h2>Spatula City! Spatula City!</h2>
<p style="background-color: yellow; font-weight: bold;">See our spectacular spatula specials!</p>
<p style="background-color: yellow; font-weight: bold; color: red; font-family: cursive;">Satisfaction guaranteed.</p>
<p style="color: red; font-family: cursive;">We'll beat any advertised price!</p>
</div>
</div>
<ul>
<li>an element can be a member of multiple classes (separated by spaces)</li>
</ul>
</div>
<div class="slide">
<h1>CSS for following examples</h1>
<div class="example">
<pre class="examplecode css">
.special {
background-color: yellow;
font-weight: bold;
}
.shout {
color: red;
font-family: cursive;
}
</pre>
</div>
<ul>
<li>for the next several slides, assume that the above CSS rules are defined</li>
</ul>
</div>
<div class="slide">
<h1>
Sections of a page:
<a href="http://www.w3schools.com/tags/tag_div.asp"><code><div></code></a>
<span class="readingsection">(4.1.1)</span>
</h1>
<p class="description">
a section or division of your HTML page (block)
</p>
<div class="example">
<pre class="examplecode html">
<em><div class="shout"></em>
<h2>Spatula City! Spatula City!</h2>
<p class="special">See our spectacular spatula specials!</p>
<p>We'll beat any advertised price!</p>
<em></div></em>
</pre>
<div class="exampleoutput" style="color: red; font-family: cursive; line-height: 1.1em;">
<h2 style="font-size: larger;">Spatula City! Spatula City!</h2>
<p style="background-color: yellow; font-weight: bold;">See our spectacular spatula specials!</p>
<p>We'll beat any advertised price!</p>
</div>
</div>
<ul>
<li>a tag used to indicate a logical section or area of a page</li>
<li>has no appearance by default, but you can apply styles to it</li>
</ul>
</div>
<div class="slide">
<h1>
Inline sections:
<a href="http://www.w3schools.com/tags/tag_span.asp"><code><span></code></a>
<span class="readingsection">(4.1.2)</span>
</h1>
<p class="description">
an inline element used purely as a range for applying styles
</p>
<div class="example">
<pre class="examplecode html">
<h2>Spatula City! Spatula City!</h2>
<p>See our <em><span class="special"></em>spectacular<em></span></em> spatula specials!</p>
<p>We'll beat <em><span class="shout"></em>any advertised price<em></span></em>!</p>
</pre>
<div class="exampleoutput" style="line-height: 1.1em;">
<h2 style="font-size: larger;">Spatula City! Spatula City!</h2>
<p>See our <span style="background-color: yellow; font-weight: bold;">spectacular</span> spatula specials!</p>
<p>We'll beat <span style="color: red; font-family: cursive;">any advertised price</span>!</p>
</div>
</div>
<ul>
<li>has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the <code>span</code></li>
</ul>
</div>
<div class="slide">
<h1>
CSS context selectors
<span class="readingsection">(4.1.3)</span>
</h1>
<pre class="syntaxtemplate css">
<var>selector1</var> <var>selector2</var> {
<var>properties</var>
}
</pre>
<ul>
<li>applies the given properties to <var>selector2</var> only if it is inside a <var>selector1</var> on the page</li>
</ul>
<pre class="syntaxtemplate css" style="margin-top: 1em">
<var>selector1</var> <em>></em> <var>selector2</var> {
<var>properties</var>
}
</pre>
<ul>
<li>applies the given properties to <var>selector2</var> only if it is <em>directly</em> inside a <var>selector1</var> on the page (<var>selector2</var> tag is immediately inside <var>selector1</var> with no tags in between)</li>
</ul>
</div>
<div class="slide">
<h1>Context selector example</h1>
<div class="example">
<pre class="examplecode html">
<p>Shop at <em><strong></em>Hardwick's Hardware<em></strong></em>...</p>
<ul>
<em><li></em>The <em><strong></em>best<em></strong></em> prices in town!</li>
<li>Act while supplies last!</li>
</ul>
</pre>
<pre class="examplecode css">
<em>li strong</em> { text-decoration: underline; }
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
</div>
<div class="slide">
<h1>More complex example</h1>
<div class="example">
<pre class="examplecode html">
<em><div id="ad"></em>
<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
<em><li class="important"></em>The <em><strong></em>best<em></strong></em> prices!</li>
<li>Act <strong>while supplies last!</strong></li>
</ul>
</div>
</pre>
<pre class="examplecode css">
<em>#ad li.important strong</em> { text-decoration: underline; }
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
</div>
<div class="slide titleslide">
<h1>4.2: Introduction to Layout</h1>
<ul>
<li>
4.1: Styling Page Sections
</li>
<li>
<strong>4.2: Introduction to Layout</strong>
</li>
<li>
4.3: Floating Elements
</li>
<li>
4.4: Sizing and Positioning
</li>
</ul>
</div>
<div class="slide">
<h1>
The CSS <a href="http://www.w3schools.com/html/default.asp">Box Model</a>
<span class="readingsection">(4.2.1)</span>
</h1>
<div class="rightfigure">
<img src="images/box_model.png" alt="box model" />
</div>
<ul>
<li>for layout purposes, every element is composed of:
<ul>
<li>the actual element's <span class="term">content</span></li>
<li>a <span class="term">border</span> around the element</li>
<li><span class="term">padding</span> between the content and the border (<em>inside</em>)</li>
<li>a <span class="term">margin</span> between the border and other content (<em>outside</em>)</li>
</ul>
</li>
<li>
width = content width + L/R padding + L/R border + L/R margin<br />
height = content height + T/B padding + T/B border + T/B margin
<ul>
<li><a href="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug">IE6 doesn't do this right</a></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Document flow - block elements</h1>
<p class="description"><img src="images/layout1.png" alt="flow" /></p>
</div>
<div class="slide">
<h1>Document flow - block and inline elements</h1>
<p class="description"><img src="images/layout3.png" alt="flow" /></p>
</div>
<div class="slide">
<h1>CSS properties for borders</h1>
<div class="example">
<pre class="examplecode css">
h2 { <em>border: 5px solid red;</em> }
</pre>
<div class="exampleoutput insertoutput">
<h2>This is a heading.</h2>
</div>
</div>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_border.asp">border</a></code>
</td>
<td>
thickness/style/size of border on all 4 sides
</td>
</tr>
</table>
<ul>
<li><span class="term">thickness</span> (specified in <code>px</code>, <code>pt</code>, <code>em</code>, or <code style="border: thin solid black;">thin</code>, <code style="border: medium solid black;">medium</code>, <code style="border: thick solid black;">thick</code>)</li>
<li style="line-height: 1.5em">
<span class="term">style</span>
(<code style="border: 5px none black;">none</code>,
<code style="border: 5px hidden black;">hidden</code>,
<code style="border: 5px dotted black;">dotted</code>,
<code style="border: 5px dashed black;">dashed</code>,
<code style="border: 5px double black;">double</code>,
<code style="border: 5px groove black;">groove</code>,
<code style="border: 5px inset black;">inset</code>,
<code style="border: 5px outset black;">outset</code>,
<code style="border: 5px ridge black;">ridge</code>,
<code style="border: 5px solid black;">solid</code>)
</li>
<li><span class="term">color</span> (specified as seen previously for text and background colors)</li>
</ul>
</div>
<div class="slide">
<h1>More border properties</h1>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_border-color.asp">border-color</a></code>,
<code><a href="http://www.w3schools.com/css/pr_border-width.asp">border-width</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_border-style.asp">border-style</a></code>
</td>
<td>
specific properties of border on all 4 sides
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_border-bottom.asp">border-bottom</a></code>,
<code><a href="http://www.w3schools.com/css/pr_border-left.asp">border-left</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_border-right.asp">border-right</a></code>,
<code><a href="http://www.w3schools.com/css/pr_border-top.asp">border-top</a></code>
</td>
<td>
all properties of border on a particular side
</td>
</tr>
<tr>
<td style="font-size: smaller;">
<code><a href="http://www.w3schools.com/css/pr_border-bottom-color.asp">border-bottom-color</a></code>,
<code><a href="http://www.w3schools.com/css/pr_border-bottom-style.asp">border-bottom-style</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_border-bottom-width.asp">border-bottom-width</a></code>,
<code><a href="http://www.w3schools.com/css/pr_border-left-color.asp">border-left-color</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_border-left-style.asp">border-left-style</a></code>,
<code><a href="http://www.w3schools.com/css/pr_border-left-width.asp">border-left-width</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_border-right-color.asp">border-right-color</a></code>,
<code><a href="http://www.w3schools.com/css/pr_border-right-style.asp">border-right-style</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_border-right-width.asp">border-right-width</a></code>,
<code><a href="http://www.w3schools.com/css/pr_border-top-color.asp">border-top-color</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_border-top-style.asp">border-top-style</a></code>,
<code><a href="http://www.w3schools.com/css/pr_border-top-width.asp">border-top-width</a></code>
</td>
<td>
properties of border on a particular side
</td>
</tr>
<tr>
<td class="completelist" colspan="2">
<a href="http://www.w3schools.com/css/css_reference.asp#border">Complete list of border properties</a>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>Border example 2</h1>
<div class="example">
<pre class="examplecode css">
h2 {
<em>border-left: thick dotted #CC0088;</em>
<em>border-bottom-color: rgb(0, 128, 128);</em>
<em>border-bottom-style: double;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<h2>This is a heading.</h2>
</div>
</div>
<ul>
<li>each side's border properties can be set individually</li>
<li>if you omit some properties, they receive default values (e.g. <code>border-bottom-width</code> above)</li>
</ul>
</div>
<div class="slide">
<h1>CSS properties for padding</h1>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_padding.asp">padding</a></code>
</td>
<td>
padding on all 4 sides
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_padding-bottom.asp">padding-bottom</a></code>
</td>
<td>
padding on bottom side only
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_padding-left.asp">padding-left</a></code>
</td>
<td>
padding on left side only
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_padding-right.asp">padding-right</a></code>
</td>
<td>
padding on right side only
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_padding-top.asp">padding-top</a></code>
</td>
<td>
padding on top side only
</td>
</tr>
<tr>
<td colspan="2" class="completelist">
<a href="http://www.w3schools.com/css/css_reference.asp#padding">Complete list of padding properties</a>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>Padding example 1</h1>
<div class="example">
<pre class="examplecode css">
p { <em>padding: 20px;</em> border: 3px solid black; }
h2 { <em>padding: 0px;</em> background-color: yellow; }
</pre>
<div class="exampleoutput insertoutput">
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<h2>This is a heading</h2>
</div>
</div>
</div>
<div class="slide">
<h1>Padding example 2</h1>
<div class="example">
<pre class="examplecode css">
p {
<em>padding-left: 200px; padding-top: 30px;</em>
background-color: fuchsia;
}
</pre>
<div class="exampleoutput insertoutput">
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
</div>
</div>
<ul>
<li>each side's padding can be set individually</li>
<li>notice that padding shares the background color of the element</li>
</ul>
</div>
<div class="slide">
<h1>CSS properties for margins</h1>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_margin.asp">margin</a></code>
</td>
<td>
margin on all 4 sides
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_margin-bottom.asp">margin-bottom</a></code>
</td>
<td>
margin on bottom side only
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_margin-left.asp">margin-left</a></code>
</td>
<td>
margin on left side only
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_margin-right.asp">margin-right</a></code>
</td>
<td>
margin on right side only
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_margin-top.asp">margin-top</a></code>
</td>
<td>
margin on top side only
</td>
</tr>
<tr>
<td colspan="2" class="completelist">
<a href="http://www.w3schools.com/css/css_reference.asp#margin">Complete list of margin properties</a>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>Margin example 1</h1>
<div class="example">
<pre class="examplecode css">
p {
<em>margin: 50px;</em>
background-color: fuchsia;
}
</pre>
<div class="exampleoutput insertoutput">
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
</div>
</div>
<ul>
<li>notice that margins are always transparent<br />(they don't contain the element's background color, etc.)</li>
</ul>
</div>
<div class="slide">
<h1>Margin example 2</h1>
<div class="example">
<pre class="examplecode css">
p {
<em>margin-left: 8em;</em>
background-color: fuchsia;
}
</pre>
<div class="exampleoutput insertoutput">
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
</div>
</div>
<ul>
<li>each side's margin can be set individually</li>
</ul>
</div>
<div class="slide">
<h1>
CSS properties for <a href="http://www.w3schools.com/css/css_reference.asp#dimension">dimensions</a> <span class="readingsection">(4.3, 4.4.1)</span>
</h1>
<div class="example">
<pre class="examplecode css">
p { <em>width: 350px;</em> background-color: yellow; }
h2 { <em>width: 50%;</em> background-color: aqua; }
</pre>
<div class="exampleoutput insertoutput">
<p>This paragraph uses the first style above.</p>
<h2>An h2 heading</h2>
</div>
</div>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_dim_width.asp">width</a></code>,
<code><a href="http://www.w3schools.com/css/pr_dim_height.asp">height</a></code>
</td>
<td>
how wide or tall to make this element <br /> (block elements only)
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_dim_max-width.asp">max-width</a></code>,
<code><a href="http://www.w3schools.com/css/pr_dim_max-height.asp">max-height</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_dim_min-width.asp">min-width</a></code>,
<code><a href="http://www.w3schools.com/css/pr_dim_min-height.asp">min-height</a></code>
</td>
<td>
max/min size of this element in given dimension
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>Centering a block element: <code>auto</code> margins</h1>
<div class="example">
<pre class="examplecode css">
p {
<em>margin-left: auto;</em>
<em>margin-right: auto;</em>
width: 750px;
}
</pre>
<div class="exampleoutput insertoutput">
<p>
<a href="http://en.wikipedia.org/wiki/Lorem_ipsum" style="text-decoration: none">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<ul>
<li>
works best if <code>width</code> is set (otherwise, may occupy entire width of page)
</li>
<li>
to center inline elements within a block element, use <code>text-align: center;</code>
</li>
</ul>
</div>
<!--
<div class="slide">
<h1>Top/bottom margin collapse</h1>
<p class="description" style="float: right"><img src="images/margincollapse1.png" alt="margin collapse" /><br />
<img src="images/margincollapse2.png" alt="margin collapse" /></p>
<ul>
<li>when two block elements appear on top of each other, their margins are collapsed</li>
<li>their shared margin is the larger of the two individual margins</li>
</ul>
</div>
-->
<!--#include virtual="commonbottom.html" -->