Web Programming Step by Step, 2nd Edition

Lecture 3: CSS Properties

Reading: 3.1 - 3.3

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.

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

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

CSS comments: /* ... */

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

<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

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

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

• can also be overline, line-through, blink, or none
• effects can be combined:

  text-decoration: overline underline;

text-shadow

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

• shadow is specified as an X-offset, a Y-offset, and an optional color

The list-style-type property

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

background-image

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

• background image/color fills the element's content area

background-repeat

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

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

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

• 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 (reference)
  • 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)

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

• 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 */