Web Programming Step by Step

Lecture 3
More CSS

Reading: 3.1 - 3.3

Recall: Basic CSS rule syntax (3.1.1)

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.

a style can select multiple elements separated by commas
the individual elements can also have their own styles (like h2 above)

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 (like HTML) is usually not commented as much as code such as Java
the // single-line comment style is NOT supported in CSS
the  HTML comment style is also NOT supported in CSS

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>

jigsaw.w3.org/css-validator/
checks your CSS to make sure it meets the official CSS specifications
more picky than the web browser, which may render malformed CSS correctly

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.

can be left, right, center, or justify (which widens all full lines of the element so that they occupy its entire width)

`text-decoration`

p {
	text-decoration: underline;
}

This paragraph uses the style above.

can also be overline, line-through, blink, or none
effects can be combined:
text-decoration: overline underline;

The `list-style-type` property (3.2.4)

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

Possible values:
1. none : No marker
2. disc (default), circle, square
3. decimal : 1, 2, 3, etc.
4. decimal-leading-zero : 01, 02, 03, etc.
5. lower-roman : i, ii, iii, iv, v, etc.
6. upper-roman : I, II, III, IV, V, etc.
7. lower-alpha : a, b, c, d, e, etc.
8. upper-alpha : A, B, C, D, E, etc.
9. lower-greek : alpha, beta, gamma, etc.
10. others: hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha

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 image/color fills the element's content area

`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

can be repeat (default), repeat-x, repeat-y, or no-repeat

`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

value consists of two tokens, each of which can be top, left, right, bottom, center, a percentage, or a length value in px, pt, etc.
value can be negative to shift left/up by a given amount

Body styles

body {
	font-size: 16px;
}

to apply a style to the entire body of your page, write a selector for the body element
saves you from manually applying a style to each element

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.

when two styles set conflicting values for the same property, the latter style takes precedence
(later we will learn about more specific styles that can override more general styles)

Embedding style sheets: `<style>` (BAD!)

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

CSS code can be embedded within the head of an HTML page
this is bad style; DO NOT DO THIS (why?)

Inline styles: the `style` attribute (BAD!)

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

higher precedence than embedded or linked styles
used for one-time overrides and styling a particular element
this is bad style; DO NOT DO THIS (why?)

Content vs. presentation

HTML is for content; what is on the page (heading; list; code; etc.)
CSS is for presentation; how to display the page (bold; centered; 20px margin; etc.)
keeping content separate from presentation is a very important web design principle
If the HTML contains no styles, its entire appearance can be changed by swapping .css files
see also: CSS Zen Garden

Cascading style sheets

it's called Cascading Style Sheets because the properties of an element cascade together in this order:
- browser's default styles
- external style sheet files (in a <link> tag)
- internal style sheets (in a <style> tag in the page header)
- inline style (the style attribute of an HTML element)

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

when multiple styles apply to an element, they are inherited
a more tightly matching rule can override a more general inherited rule
not all properties are inherited (notice link's color above)

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

Web Programming Step by Step, Lecture 3

More CSS

Web Programming Step by Step

Lecture 3 More CSS

Reading: 3.1 - 3.3

Recall: Basic CSS rule syntax (3.1.1)

Grouping styles

This h2 uses the above styles.

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

W3C CSS Validator (3.2.6)

CSS properties for text (3.1.6)

text-align

The Emperor's Quote

text-decoration

The list-style-type property (3.2.4)

CSS properties for backgrounds

background-image

background-repeat

background-position

Body styles

Styles that conflict

This heading uses both styles above.

Embedding style sheets: <style> (BAD!)

Inline styles: the style attribute (BAD!)

Content vs. presentation

Cascading style sheets

Inheriting styles (explanation) (3.2.1)

This is a heading.

CSS pseudo-classes

Lecture 3
More CSS

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

`text-align`

`text-decoration`

The `list-style-type` property (3.2.4)

`background-image`

`background-repeat`

`background-position`

Embedding style sheets: `<style>` (BAD!)

Inline styles: the `style` attribute (BAD!)