Web Programming Step by Step, 2nd Edition

Chapter 3: CSS for Styling

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 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): <link> 

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

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

Basic CSS rule syntax 

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

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

CSS properties for colors 

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.

CSS properties for fonts

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.

Recall: Basic CSS rule syntax 

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

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

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: /* ... */ 

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

W3C CSS Validator 

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

3.2: CSS Properties

CSS properties for text

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.

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

The list-style-type property 

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

Styling tables 

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" span="2"></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>

Don't use tables for layout!

CSS 3 new features

3.3: More CSS Syntax

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