Lecture 10b: Cascading Style Sheets

What You Will Learn Today

  1. Avoid using visual hacks for visual presentation of web pages.
  2. Use styles for all physical formatting.
  3. Use the three different ways to refer to styles and explain style precedence and inheritance.
  4. Use style rules and CSS measurement units and colours.
  5. Use styles for fonts, formatting, spacing and alignment, blocks, and positioning.
  6. Use styles for links, lists and background images.
  7. Use class and id attributes, and div and span tags.
  8. Use JavaScript to read and change styles.

Visual Hacks

Many tricks or hacks are used to improve page appearance:

Why They Are Bad

Advantages of Styles

Disadvantages of Styles

Three Ways to Refer to Styles

Style Precedence

Style Rules

CSS Measurement Units

Colours

Fonts

More Text Formatting

Text Spacing and Alignment

Block Elements

Positioning

Hypertext Links

Lists

Background Images

CLASS and ID, DIV and SPAN

JavaScript and Styles

To Do After Class