Designing Web Pages with CSS

The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element. CSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented. CSS associates these style rules with HTML elements. These rules govern how the content of specific elements should be displayed.

Block & Inline Elements

Block level elements look like they start on a new line. Examples:




CSS Rule

A CSS rule contains two parts: a selector and a declaration


A selector indicated which element the rule applies to. The same rule can apply to more than onde element if you separate the element names with commas.


Declarations indicate how the elements referred to in the selector should be styled. Declarations are split into two parts: property and value


Properties indicate the aspect of the element you want to change: color, font, width, height and border.


Values specify the settings you want to use for the chosen properties.

External CSS

Internal HTML


CSS Selectors

How CSS Rules Cascade


Review Questions

  1. What is an empty element?
  2. What does a period symbol mean?
  3. What does CSS stand for?

Review Answers

  1. Empty elements do not need a closing tag
  2. Full Stop
  3. Cascading Style Sheet