<!--#include virtual="commontop.html" -->
<title>Web Programming Step by Step, Lecture 3: More CSS</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 3</h1>
<h2>More CSS</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 3 <br /> More CSS</h3>
<h4>Reading: 3.1 - 3.3</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">
<h1>
Recall: Basic CSS rule syntax
<span class="readingsection">(3.1.1)</span>
</h1>
<pre class="syntaxtemplate css">
<var>selector</var> {
<var>property</var>: <var>value</var>;
<var>property</var>: <var>value</var>;
<var>...</var>
<var>property</var>: <var>value</var>;
}
</pre>
<pre class="examplecode css">
p {
font-family: sans-serif;
color: red;
}
</pre>
</div>
<div class="slide">
<h1>Grouping styles</h1>
<div class="example">
<pre class="examplecode css">
p<em>, h1, h2</em> {
color: green;
}
h2 {
background-color: yellow;
}
</pre>
<div class="exampleoutput insertoutput">
<p>This paragraph uses the above style.</p>
<h2>This h2 uses the above styles.</h2>
</div>
</div>
<ul>
<li>a style can select multiple elements separated by commas</li>
<li>the individual elements can also have their own styles (like <code>h2</code> above)</li>
</ul>
</div>
<div class="slide">
<h1>
CSS comments:
<code>/*</code> ... <code>*/</code>
<span class="readingsection">(3.1.4)</span>
</h1>
<pre class="examplecode css">
<span class="comment">/* This is a comment.
It can span many lines in the CSS file. */</span>
p {
color: red;
background-color: aqua;
}
</pre>
<ul>
<li>CSS (like HTML) is usually not commented as much as code such as Java</li>
<li>the <code>//</code> single-line comment style is NOT supported in CSS</li>
<li>the <code><!-- ... --></code> HTML comment style is also NOT supported in CSS</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="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>
CSS properties for text
<span class="readingsection">(3.1.6)</span>
</h1>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_text-align.asp">text-align</a></code>
</td>
<td>
alignment of text within its element
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_text-decoration.asp">text-decoration</a></code>
</td>
<td>
decorations such as underlining
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_dim_line-height.asp">line-height</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_text_word-spacing.asp">word-spacing</a></code>, <br />
<code><a href="http://www.w3schools.com/css/pr_text_letter-spacing.asp">letter-spacing</a></code>
</td>
<td>
gaps between the various portions of the text
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_text-indent.asp">text-indent</a></code>
</td>
<td>
indents the first letter of each paragraph
</td>
</tr>
<tr>
<td colspan="2" class="completelist">
<a href="http://www.w3schools.com/css/css_reference.asp#text">Complete list of text properties</a>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_text_text-align.asp">text-align</a></code></h1>
<div class="example">
<pre class="examplecode css">
blockquote { <em>text-align: justify;</em> }
h2 { <em>text-align: center;</em> }
</pre>
<div class="exampleoutput insertoutput">
<h2>The Emperor's Quote</h2>
<blockquote>
<p>
[TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I am unarmed. Take your weapon. Strike me down with all of your hatred and your journey towards the dark side will be complete.
</p>
</blockquote>
</div>
</div>
<ul>
<li>can be <code>left</code>, <code>right</code>, <code>center</code>, or <code>justify</code> (which widens all full lines of the element so that they occupy its entire width) </li>
</ul>
</div>
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_text_text-decoration.asp">text-decoration</a></code></h1>
<div class="example">
<pre class="examplecode css">
p {
<em>text-decoration: underline;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p style="text-decoration: underline;">This paragraph uses the style above.</p>
</div>
</div>
<ul>
<li>can also be <code style="text-decoration: overline;">overline</code>, <code style="text-decoration: line-through;">line-through</code>, <code style="text-decoration: blink;">blink</code>, or <code>none</code></li>
<li>
effects can be combined:
<p><code>text-decoration: overline underline;</code></p>
</li>
</ul>
</div>
<div class="slide">
<h1>
The <a href="http://www.w3schools.com/css/pr_list-style-type.asp"><code>list-style-type</code></a> property
<span class="readingsection">(3.2.4)</span>
</h1>
<pre class="examplecode css">
ol { <em>list-style-type: lower-roman;</em> }
</pre>
<ul style="list-style-type: square">
<li>Possible values:
<ol style="list-style-type: lower-roman">
<li><code>none</code> : No marker</li>
<li><code>disc</code> (default), <code>circle</code>, <code>square</code></li>
<li><code>decimal</code> : 1, 2, 3, etc.</li>
<li><code>decimal-leading-zero</code> : 01, 02, 03, etc.</li>
<li><code>lower-roman</code> : i, ii, iii, iv, v, etc.</li>
<li><code>upper-roman</code> : I, II, III, IV, V, etc.</li>
<li><code>lower-alpha</code> : a, b, c, d, e, etc.</li>
<li><code>upper-alpha</code> : A, B, C, D, E, etc.</li>
<li><code>lower-greek</code> : alpha, beta, gamma, etc.</li>
<li>others: <code>hebrew</code>, <code>armenian</code>, <code>georgian</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>katakana</code>, <code>hiragana-iroha</code>, <code>katakana-iroha</code></li>
</ol>
</li>
</ul>
</div>
<div class="slide">
<h1>CSS <a href="http://www.w3schools.com/css/css_reference.asp#background">properties for backgrounds</a></h1>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background-color.asp">background-color</a></code>
</td>
<td>
color to fill background
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background-image.asp">background-image</a></code>
</td>
<td>
image to place in background
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background-position.asp">background-position</a></code>
</td>
<td>
placement of bg image within element
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background-repeat.asp">background-repeat</a></code>
</td>
<td>
whether/how bg image should be repeated
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background-attachment.asp">background-attachment</a></code>
</td>
<td>
whether bg image scrolls with page
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_background.asp">background</a></code>
</td>
<td>
shorthand to set all background properties
</td>
</tr>
</table>
</div>
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_background-image.asp">background-image</a></code></h1>
<div class="example">
<pre class="examplecode css">
body {
<em>background-image: url("images/draft.jpg");</em>
}
</pre>
<div class="exampleoutput insertoutput" style="background-repeat: repeat; background-position: inherit;">
<p>
This is the first paragraph
</p>
<p>
This is the second paragraph...<br />
It occupies 2 lines
</p>
</div>
</div>
<ul>
<li>background image/color fills the element's content area</li>
</ul>
</div>
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_background-repeat.asp">background-repeat</a></code></h1>
<div class="example">
<pre class="examplecode css">
body {
background-image: url("images/draft.jpg");
<em>background-repeat: repeat-x;</em>
}
</pre>
<div class="exampleoutput insertoutput" style="background-position: inherit;">
<p>This is the first paragraph</p>
<p>This is the second paragraph...<br />
It occupies 2 lines</p>
</div>
</div>
<ul>
<li>can be <code>repeat</code> (default), <code>repeat-x</code>, <code>repeat-y</code>, or <code>no-repeat</code></li>
</ul>
</div>
<div class="slide">
<h1><code><a href="http://www.w3schools.com/css/pr_background-position.asp">background-position</a></code></h1>
<div class="example">
<pre class="examplecode css">
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
<em>background-position: 370px 20px;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p>This is the first paragraph</p>
<p>This is the second paragraph...<br />
It occupies 2 lines</p>
</div>
</div>
<ul>
<li>value consists of two tokens, each of which can be <code>top</code>, <code>left</code>, <code>right</code>, <code>bottom</code>, <code>center</code>, a percentage, or a length value in <code>px</code>, <code>pt</code>, etc.</li>
<li>value can be negative to shift left/up by a given amount</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>
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 the page (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><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>
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>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>
<!--#include virtual="commonbottom.html" -->