<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 2: Page Sections and the Box Model — INFO 343 Autumn 2012</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>INFO 343 Lecture 2</h1>
<h2>Page Sections and the Box Model</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>Page Sections and the Box Model</h1>
<h3>Lecture 2</h3>
<!-- <h4>Reading: 4.1, 4.3</h4> -->
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp, Jessica Miller, and/or Morgan Doocy.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="../s5/images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide">
<h1>
W3C XHTML Validator
<span class="readingsection">(2.3.2)</span>
</h1>
<div class="example">
<pre class="examplecode html">
<p>
<em><a href="http://validator.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-xhtml11"
alt="Validate" />
</a></em>
</p>
</pre>
<div class="exampleoutput">
<p>
<a href="http://validator.w3.org/check/referer">
<img src="../s5/images/w3c-xhtml11.png" alt="Validate" />
</a>
</p>
</div>
</div>
<ul>
<li><a href="http://validator.w3.org/">validator.w3.org</a></li>
<li>checks your HTML code to make sure it follows the official HTML syntax</li>
<li>more picky than the browser, which may render bad HTML correctly</li>
<li>initially we’ll be writing <strong>XHTML 1.1</strong> code; later we’ll allow newer <strong>HTML 5</strong></li>
</ul>
</div>
<div class="slide">
<h1>
W3C CSS Validator
<span class="readingsection">(3.2.6)</span>
</h1>
<div class="example">
<pre class="examplecode css">
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p>
</pre>
<div class="exampleoutput">
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<ul>
<li><a href="http://jigsaw.w3.org/css-validator/">jigsaw.w3.org/css-validator/</a></li>
<li>checks your CSS to make sure it meets the official CSS specifications</li>
<li>more picky than the web browser, which may render malformed CSS correctly</li>
</ul>
</div>
<div class="slide">
<h1>
Web page metadata:
<a href="http://www.w3schools.com/tags/tag_meta.asp"><code><meta></code></a>
<span class="readingsection">(2.3.3)</span>
</h1>
<p class="description">
information about your page (for a browser, search engine, etc.)
</p>
<pre class="examplecode html">
<<em>meta</em> http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<<em>meta</em> name="description"
content="Course webpage for INFO 343 at the University of Washington." />
<<em>meta</em> name="keywords" content="web programming, informatics" />
</pre>
<ul>
<li>placed <strong>in the <code>head</code></strong> section of your XHTML page</li>
<li><code>meta</code> tags often have both the <code>name</code> and <code>content</code> attributes
<ul>
<li>some <code>meta</code> tags use the <code>http-equiv</code> attribute instead of <code>name</code></li>
</ul>
</li>
<li>using a <code>meta</code> tag <code>Content-Type</code> stops validator "tentatively valid" warnings
</li>
</ul>
</div>
<div class="slide">
<h1>Favorites icon ("favicon")</h1>
<pre class="syntaxtemplate html">
<link href="<var>filename</var>" type="<var>MIME type</var>" rel="shortcut icon" />
</pre>
<div class="example">
<pre class="examplecode html">
<link href="yahoo.gif" type="image/gif" rel="shortcut icon" />
</pre>
<div class="exampleoutput">
<img src="../s5/images/favicon1.gif" alt="favicon" /> <img src="../s5/images/favicon2.gif" alt="favicon" />
</div>
</div>
<ul>
<li>the <code>link</code> tag, placed in the <code>head</code> section, attaches another file to the page
<ul>
<li>in this case, an icon to be placed in the browser title bar and bookmarks</li>
</ul>
</li>
<li>IE6: Doesn't work; must put a file <code>favicon.ico</code> in the root of the web server (<a href="http://www.clickfire.com/viewpoints/articles/favicons.php">info</a>)</li>
</ul>
</div>
<div class="slide">
<h1>More HTML elements</h1>
<table class="standard">
<tr>
<th>
elements
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<a href="http://www.w3schools.com/tags/tag_phrase_elements.asp"><code>var</code>, <code>kbd</code>, <code>dfn</code>, <code>samp</code></a>
</td>
<td>
more phrase elements: <var>variable</var>, <kbd>keyboard input</kbd>, <dfn>definition</dfn>, and <samp>sample</samp>
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/tags/tag_ins.asp">ins</a></code>, <code><a href="http://www.w3schools.com/tags/tag_del.asp">del</a></code>
</td>
<td>
indicate <ins>insertions</ins> or <del>deletions</del>
</td>
</tr>
<tr>
<td>
<a href="http://www.w3schools.com/tags/tag_sup.asp">
<code>sup</code>,
<code>sub</code>
</a>
</td>
<td>
<sup>superscript</sup> and <sub>subscript</sub> items
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/tags/tag_address.asp">address</a></code>,
<code><a href="http://www.w3schools.com/tags/tag_cite.asp">cite</a></code>
</td>
<td>
address, citation/title of work
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/tags/tag_abbr.asp">abbr</a></code>
</td>
<td>
<abbr title="abbreviation">abbrev.</abbr>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>
Content vs. presentation
</h1>
<ul>
<li>HTML is for <strong>content</strong> — <em>what</em> is on the page (heading, list, code, etc.)</li>
<li>CSS is for <strong>presentation</strong> — how to display things (bold, centered, 20px margin, etc.)</li>
<li>keeping content separate from presentation is a very important web design principle</li>
<li>If the HTML contains no styles, its entire appearance can be changed by swapping <code>.css</code> files</li>
<li>see also: <a class="popup" href="http://csszengarden.com/">CSS Zen Garden</a></li>
</ul>
</div>
<div class="slide">
<h1>Semantics & tag choice</h1>
<ul>
<li>Choose HTML tags for their <em>meaning</em>, not for how they look.</li>
<li>Example: You may want to indicate emphasis using something other than bold or italic. Simply use CSS to change the appearance of <code>em</code> or <code>strong</code> from the browser’s default.</li>
<li>Example: You may want to make something italic or bold <em>purely</em> for stylistic reasons — not to emphasize it any more strongly than anything else. Which tag would you use?</li>
</ul>
</div>
<div class="slide">
<h1>Activity: What tags would you use?</h1>
<p>The following image contains various types of content. Decide how you would represent each piece of content to convert the document to HTML.</p>
<p><a href="arcadia.jpg"><img src="arcadia.jpg" alt="Photo of first two pages of 'Arcadia' by Tom Stoppard" /></a></p>
</div>
<div class="slide">
<h1>
Inheriting styles
(<a href="http://www.autisticcuckoo.net/archive.php?id=2005/01/22/inheritance-vs-cascade">explanation</a>)
<span class="readingsection">(3.2.1)</span>
</h1>
<div class="example">
<pre class="examplecode css">
body { font-family: sans-serif; background-color: yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: overline underline; }
h2 { font-weight: bold; text-align: center; }
</pre>
<div class="exampleoutput insertoutput">
<h2>This is a heading.</h2>
<p>A styled paragraph. <a href="2-html.html">Previous slides</a> are available on the web site.</p>
<ul>
<li>a bulleted list</li>
</ul>
</div>
</div>
<ul>
<li>when multiple styles apply to an element, they are <span class="term">inherited</span></li>
<li>a more tightly matching rule can override a more general inherited rule</li>
<li>not all properties are inherited (notice link's color above)</li>
</ul>
</div>
<div class="slide">
<h1>Body styles</h1>
<pre class="examplecode css">
<em>body</em> {
font-size: 16px;
}
</pre>
<ul>
<li>to apply a style to the entire body of your page, write a selector for the <code>body</code> element</li>
<li>saves you from manually applying a style to each element</li>
</ul>
</div>
<div class="slide">
<h1>Styles that conflict</h1>
<div class="example">
<pre class="examplecode css">
body { color: green; }
p, h1, h2 { color: blue; font-style: italic; }
h2 { <em>color: red;</em> background-color: yellow; }
</pre>
<div class="exampleoutput insertoutput">
<p>This paragraph uses the first style above.</p>
<h2 style="font-size: larger; font-style: italic; color: red; background-color: yellow;">This heading uses both styles above.</h2>
</div>
</div>
<ul>
<li>when two styles set conflicting values for the same property, the latter style takes precedence</li>
<li>
(later we will learn about more specific styles that can override more general styles)
</li>
</ul>
</div>
<div class="slide">
<h1>
Embedding style sheets:
<code><a href="http://www.w3schools.com/tags/tag_style.asp"><style></a></code> (BAD!)
</h1>
<pre class="examplecode html">
<head>
<em><style type="text/css"></em>
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
<em></style></em>
</head>
</pre>
<ul>
<li>CSS code can be embedded within the <code>head</code> of an HTML page</li>
<li>this is <em>bad style</em>; DO NOT DO THIS (why?)</li>
</ul>
</div>
<div class="slide">
<h1>
Inline styles: the <code>style</code> attribute (BAD!)
</h1>
<div class="example">
<pre class="examplecode html">
<p <em>style="font-family: sans-serif; color: red;"</em>>
This is a paragraph</p>
</pre>
<div class="exampleoutput insertoutput"></div>
</div>
<ul>
<li>higher precedence than embedded or linked styles</li>
<li>used for one-time overrides and styling a particular element</li>
<li>this is <em>bad style</em>; DO NOT DO THIS (why?)</li>
</ul>
</div>
<div class="slide">
<h1><em>Cascading</em> style sheets</h1>
<ul>
<li>it's called Cascading Style Sheets because the properties of an element <em><a href="http://m-w.com/dictionary/cascade">cascade</a></em> together in this order:
<ul>
<li>browser's default styles</li>
<li>external style sheet files (in a <code><link></code> tag)</li>
<li>internal style sheets (in a <code><style></code> tag in the page header)</li>
<li>inline style (the <code>style</code> attribute of an HTML element)</li>
</ul>
</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>allows you to target an element by what it’s inside of (“context”)</li>
<li>“apply to <var>selector2</var> only when it’s inside a <var>selector1</var>”</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>
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 used many times on a single 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 <a href="http://www.w3schools.com/css/css_pseudo_classes.asp">pseudo-classes</a></h1>
<div class="example">
<pre class="examplecode css">
a<em>:link</em> { color: #FF0000; } <span class="comment">/* unvisited link */</span>
a<em>:visited</em> { color: #00FF00; } <span class="comment">/* visited link */</span>
a<em>:hover</em> { color: #FF00FF; } <span class="comment">/* mouse over link */</span>
</pre>
<div class="exampleoutput insertoutput">
<a href="http://www.webstepbook.com/">Buy early, buy often!</a>
</div>
</div>
<table class="standard" style="font-size: smaller; margin-top: 2px;">
<tr>
<th>
class
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>:active</code>
</td>
<td>
an activated or selected element
</td>
</tr>
<tr>
<td>
<code>:focus</code>
</td>
<td>
an element that has the keyboard focus
</td>
</tr>
<tr>
<td>
<code>:hover</code>
</td>
<td>
an element that has the mouse over it
</td>
</tr>
<tr>
<td>
<code>:link</code>
</td>
<td>
a link that has not been visited
</td>
</tr>
<tr>
<td>
<code>:visited</code>
</td>
<td>
a link that has already been visited
</td>
</tr>
<tr>
<td>
<code>:first-letter</code>
</td>
<td>
the first letter of text inside an element
</td>
</tr>
<tr>
<td>
<code>:first-line</code>
</td>
<td>
the first line of text inside an element
</td>
</tr>
<tr>
<td>
<code>:first-child</code>
</td>
<td>
an element that is the first one to appear inside another
</td>
</tr>
</table>
</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 identifier to any single element on a page</li>
<li>a particular ID <strong>can only be used once per page</strong></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>Page sections: grouping elements together</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>often want to logically group certain elements together that are related</li>
<li>related elements are often styled similarly, so grouping them can help reduce redundant CSS styles</li>
<!-- <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>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>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">
<h1>Naming: Classes vs. IDs</h1>
<ul>
<li>Classes are like last names/family names
<ul>
<li>“I’m a Jones. I may be the only one here right now, but I’m not unique in the world.”</li>
<li><code>p.warning</code>, <code>a.externallink</code></li>
</ul>
</li>
<li>IDs are like full name & social security number — a single, unique individual
<ul>
<li>“I’m Mary Jones, the one born at 6:34:56 PM on June 18th, 1983 in room 10b of Harborview Hospital in Seattle, WA, USA, planet Earth…”</li>
</ul>
</li>
</ul>
</div> -->
<div class="slide">
<h1>Targeting elements for styling</h1>
<ol>
<li>Can just tag names be used? (<code>li</code>, <code>a</code>, etc?)</li>
<li>If not, can a context selector be used with just tag names? (<code>ul li</code>, <code>p a</code>, etc.)</li>
<li>If not, can a context selector be used with existing IDs & classes? (<code>#mission ul li</code>, <code>p.warning a</code>, etc.)</li>
<li>If not, should I add an ID or class to <strong>a different</strong> element to help target this one? (<code>#mission</code>, <code>.warning</code>, etc.)</li>
<li>If not, should I add an ID or class to <strong>this</strong> element?</li>
</ol>
</div>
<div class="slide">
<h1>Block vs. inline elements (<a href="http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1">explanation</a>)</h1>
<div class="centerfigure">
<img src="../s5/images/layout2.png" alt="elements" />
</div>
<ul>
<li><span class="term"><a href="http://htmlhelp.com/reference/html40/block.html">block</a></span> elements contain an entire large region of content
<ul>
<li>examples: paragraphs, lists, table cells</li>
<li>the browser places a margin of whitespace between block elements for separation</li>
</ul>
</li>
<li><span class="term"><a href="http://www.cs.sfu.ca/CC/165/sbrown1/wdgxhtml10/inline.html">inline</a></span> elements affect a small amount of content
<ul>
<li>examples: bold text, code fragments, images</li>
<li>the browser allows many inline elements to appear on the same line</li>
<li>must be nested inside a block element</li>
</ul>
</li>
</ul>
<!-- ***
a picture would be nice here
some block elements can contain only other block elements
body, form
some can contain only inline elements and plain text
p
some can contain either
div
li
-->
</div>
<div class="slide">
<h1>Document flow - block elements</h1>
<div><img style="float: right; margin: 0 2em" src="../s5/images/layout1.png" alt="flow" /></div>
<p class="description"><strong>Block elements</strong> are containers.</p>
<ul>
<li>Chunks of text “stacked” vertically on the page from top to bottom</li>
<li>By default, takes up as much page width as possible</li>
<li>Browsers put vertical space between them by default (except <code>div</code>)</li>
<li>Examples: <code>h1</code>–<code>h6</code>, <code>p</code>, <code>ul</code>, <code>li</code>, <code>blockquote</code>, etc.</li>
</ul>
</div>
<div class="slide">
<h1>Document flow - block and inline elements</h1>
<div><img style="float: right; margin: 0 2em" src="../s5/images/layout3.png" alt="flow" /></div>
<p class="description"><strong>Inline elements</strong> are contained inside of block elements.</p>
<ul>
<li>Flow with, and rest on, lines of text</li>
<li>“Stacked” horizontally from left to right</li>
<li>Long lines get wrapped to stay within block-level container</li>
<li>Examples: <code>em</code>, <code>strong</code>, <code>a</code>, <code>q</code>, <code>del</code>, <code>abbr</code>, etc.</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="../s5/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>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>
<strong>only</strong> works if <code>width</code> is set (otherwise, will occupy entire width of page)
</li>
<li>
to (horizontally) center inline content within a block element, use <code>text-align: center;</code>
</li>
</ul>
</div>
<!--#include virtual="../s5/commonbottom.html" -->