Web Programming Step by Step

Chapter 3
CSS for Styling

Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

3.1: Basic CSS

The bad way to produce styles

<p>
	<font face="Arial">Welcome to Greasy Joe's.</font>
	You will <b>never</b>, <i>ever</i>, <u>EVER</u> beat 
	<font size="+4" color="red">OUR</font> prices!
</p>

Cascading Style Sheets (CSS)

Basic CSS rule syntax (3.1.1)

selector {
	property: value;
	property: value;
	...
	property: value;
}
p {
  font-family: sans-serif;
  color: red;
}

Attaching a CSS file: <link> (3.1.2)

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

<link href="http://www.google.com/uds/css/gsearch.css"
	rel="stylesheet" type="text/css" />

Aside: Favorites icon ("favicon")

<link href="filename" type="MIME type" rel="shortcut icon" />
<link href="yahoo.gif" type="image/gif" rel="shortcut icon" />
favicon favicon

Embedding style sheets: <style>

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

Inline styles: the style attribute

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

CSS properties for colors (3.1.3)

p {
	color: red;
	background-color: yellow;
}

This paragraph uses the style above.

property description
color color of the element's text
background-color color that will appear behind the element

Specifying colors

p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }

This paragraph uses the first style above.

This h2 uses the second style above.

This h4 uses the third style above.

Grouping styles

p, h1, h2 {
	color: green;
}
h2 {
	background-color: yellow;
}

This paragraph uses the above style.

This h2 uses the above styles.

CSS comments: /* ... */ (3.1.4)

/* This is a comment.
  It can span many lines in the CSS file. */
p {
	color: red; background-color: aqua;
}

CSS properties for fonts (3.1.5)

property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
Complete list of font properties

font-family

p {
	font-family: Georgia;
}
h2 {
	font-family: "Courier New";
}

This paragraph uses the first style above.

This h2 uses the second style above.

More about font-family

p {
	font-family: Garamond, "Times New Roman", serif;
}

This paragraph uses the above style.

  • if the first font is not found on the user's computer, the next is tried
  • generally should specify similar fonts
  • placing a generic font name at the end of your font-family value ensures that every computer will use a valid font

font-size

p {
	font-size: 14pt;
}

This paragraph uses the style above.

  • pt specifies number of point, where a point is 1/72 of an inch onscreen
  • px specifies a number of pixels on the screen
  • em specifies number of m-widths, where 1 em is equal to the font's current size

font-weight, font-style

p {
	font-weight: bold;
	font-style: italic;
}

This paragraph uses the style above.

Spying on styles with Firebug

firebug firebug

Why <strong>, <em> and not <b>, <i>?

strong { font-weight: normal; color: red; }
em { font-style: normal; background-color: #DDDDDD; }

Now if I want to strongly emphasize something or just emphasize it, it doesn't necessarily have to be bold or italic.

CSS properties for text (3.1.6)

property description
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
word-spacing,
letter-spacing
gaps between the various portions of the text
text-indent indents the first letter of each paragraph
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.

The list-style-type property (3.2.4)

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

3.2: More CSS

Body styles

body {
	font-size: 16px;
}

Cascading style sheets

Inheriting styles (explanation) (3.2.1)

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

Styles that conflict

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.

The HTML id attribute (3.2.2)

<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 (3.2.3)

<p class="standout">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 {
	background-color: yellow;
	font-weight: bold;
}
p.standout {
	color: red;
	font-family: cursive;
}

Spatula City! Spatula City!

See our spectacular spatula specials!

Today only: satisfaction guaranteed.

Multiple classes

<h2 class="standout">Spatula City!  Spatula City!</h2>
<p class="special">See our spectacular spatula specials!</p>
<p class="special standout">Satisfaction guaranteed.</p>
<p class="standout">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 pseudo-classes

a:link    { color: #FF0000; }      /* unvisited link */
a:visited { color: #00FF00; }      /* visited link */
a:hover   { color: #FF00FF; }      /* mouse over link */
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

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

Showing a partial image

.partialimage1, .partialimage2 {
	background-image: url("images/sex_and_the_city.jpg");
	background-repeat: no-repeat;
	width: 70px;   height: 200px;
}
.partialimage1 { background-position: 0px 0px; }
.partialimage2 { background-position: -115px 0px; }
sex and the city

Styling tables (3.2.6)

table { border: 2px solid black; caption-side: bottom; }
tr { font-style: italic; }
td { background-color: yellow; text-align: center; width: 30%; }
My important data
Column 1Column 2
1,11,2 okay
2,1 real wide2,2

The border-collapse property

table, td, th { border: 2px solid black; }
table { border-collapse: collapse; }
Without border-collapse
Column 1Column 2
1,11,2
2,12,2
With border-collapse
Column 1Column 2
1,11,2
2,12,2

The rowspan and colspan attributes

<table>
	<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
	<tr><td colspan="2">1,1-1,2</td>
		<td rowspan="3">1,3-3,3</td></tr>
	<tr><td>2,1</td><td>2,2</td></tr>
	<tr><td>3,1</td><td>3,2</td></tr>
</table>

Column styles: <col>, <colgroup>

<table>
	<col class="urgent" />
	<colgroup class="highlight">
		<col /><col />
	</colgroup>
	
	<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
	<tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
	<tr><td>2,1</td><td>2,2</td><td>2,3</td></tr>
</table>

W3C CSS Validator (3.2.6)

<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>
Valid CSS!