Web Programming Step by Step, 2nd Edition

Lecture 3: CSS Properties; Page Sections

Reading: Ch. 3; 4.1

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid HTML5 Valid CSS

Recall: Basic CSS rule syntax 

selector {
	property: value;
	property: value;
	...
	property: value;
}

p {
  font-family: sans-serif;
  color: red;
}

Recall: Attaching a CSS stylesheet with <link> 

<head>
	...
	<link href="filename" type="text/css" rel="stylesheet" />
	...
</head>

<link href="style.css" type="text/css" rel="stylesheet" />

3.2: CSS Properties

CSS properties for text

property description
text-align alignment of text within its element
text-decoration decorations such as underlining
text-indent indents the first letter of each paragraph
text-shadow a colored shadow near an existing piece of text css3
line-height,
word-spacing,
letter-spacing 		gaps between the various portions of the text
Complete list of text properties

text-align

blockquote { text-align: justify; }
h2 { text-align: center; }

The Emperor's Quote

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

text-decoration

p {
	text-decoration: underline;
}

This paragraph uses the style above.

text-shadow css3 

p {
	font-weight: bold;
	text-shadow: -2px 5px gray;
}

This paragraph uses the style above.

The list-style-type property 

ol { list-style-type: lower-roman; }

CSS properties for backgrounds

property description
background-color color to fill background
background-image image to place in background
background-position placement of bg image within element
background-repeat whether/how bg image should be repeated
background-attachment whether bg image scrolls with page
background-size how large the background appears behind the element
background shorthand to set all background properties

background-image

body {
	background-image: url("images/draft.jpg");
}

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

background-repeat

body {
	background-image: url("images/draft.jpg");
	background-repeat: repeat-x;
}

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

background-position

body {
	background-image: url("images/draft.jpg");
	background-repeat: no-repeat;
	background-position: 370px 20px;
}

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

Body styles

body {
	font-size: 16px;
}

Styles that conflict

body { color: green; }
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }

This paragraph uses the first style above.

This heading uses both styles above.

Embedding style sheets: <style> (BAD!) 

<head>
	<style type="text/css">
		p { font-family: sans-serif; color: red; }
		h2 { background-color: yellow; }
	</style>
</head>

Inline styles: the style attribute (BAD!) 

<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>

Content vs. presentation

Cascading style sheets

Inheriting styles (explanation) 

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

This is a heading.

A styled paragraph. Previous slides are available on the web site.

  • a bulleted list

CSS pseudo-classes

a:link    { color: #FF0000; }      /* unvisited link */
a:visited { color: #00FF00; }      /* visited link */
a:hover   { color: #FF00FF; }      /* mouse over link */
Buy early, buy often!
class description
:active an activated or selected element
:focus an element that has the keyboard focus
:hover an element that has the mouse over it
:link a link that has not been visited
:visited a link that has already been visited
:first-letter the first letter of text inside an element
:first-line the first line of text inside an element
:first-child an element that is the first one to appear inside another
:nth-child(N) applies to every Nth child of a given parent

4.1: Styling Page Sections

Motivation for page sections

flow

The HTML id attribute 

<p>Spatula City!  Spatula City!</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>

Linking to sections of a web page

<p>Visit <a href=
		"http://www.textpad.com/download/index.html#downloads">
	textpad.com</a> to get the TextPad editor.</p>

<p><a href="#mission">View our Mission Statement</a></p>

CSS ID selectors

#mission {
	font-style: italic;
	font-family: "Garamond", "Century Gothic", serif;
}

Spatula City! Spatula City!

Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers esplode with splendor!

The HTML class attribute 

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

CSS class selectors

.special {                   /* any element with class="special" */
	background-color: yellow;
	font-weight: bold;
}
p.shout {                    /* only p elements with class="shout" */
	color: red;
	font-family: cursive;
}

Spatula City! Spatula City!

See our spectacular spatula specials!

Today only: satisfaction guaranteed.

Multiple classes

<h2 class="shout">Spatula City!  Spatula City!</h2>
<p class="special">See our spectacular spatula specials!</p>
<p class="special shout">Satisfaction guaranteed.</p>
<p class="shout">We'll beat any advertised price!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

Satisfaction guaranteed.

We'll beat any advertised price!

CSS for following examples

.special {
	background-color: yellow;
	font-weight: bold;
}
.shout {
	color: red;
	font-family: cursive;
}

Sections of a page: <div>

a section or division of your HTML page (block) 

<div class="shout">
	<h2>Spatula City!  Spatula City!</h2>
	<p class="special">See our spectacular spatula specials!</p>
	<p>We'll beat any advertised price!</p>
</div>

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

Inline sections: <span>

an inline element used purely as a range for applying styles 

<h2>Spatula City!  Spatula City!</h2>
<p>See our <span class="special">spectacular</span> spatula specials!</p>
<p>We'll beat <span class="shout">any advertised price</span>!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

HTML5’s new page section tags html5

element description
header, footer top/bottom portion of the page
nav a navigation area
heading a compound heading
(i.e., with more than one h1–h6
or other heading-like stuff)
aside a “tangentially related” section of the page
(i.e., for sidebars, notes, etc.)
section a generic section of the page
article a piece of periodic content
(like a blog post or article)

CSS context selectors 

selector1 selector2 {
	properties
}

selector1 > selector2 {
	properties
}

Context selector example

<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
	<li>The <strong>best</strong> prices in town!</li>
	<li>Act while supplies last!</li>
</ul>

li strong { text-decoration: underline; }

More complex example

<div id="ad">
	<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
	<ul>
		<li class="important">The <strong>best</strong> prices!</li>
		<li>Act <strong>while supplies last!</strong></li>
	</ul>
</div>

#ad li.important strong { text-decoration: underline; }