Comm 328 Responsive Web Design

CSS Terminology

Cascading Style Sheets (CSS) represent the presentation layer. We use CSS to style our HTML documents.

A basic CSS rule has the following format:

selector {
  property: value;
}
Selector
The selector is the element that the rule will affect
Property
The property is the actual CSS rule
Value
The value is the value we want for the given property

Declarations and Declaration Blocks

Each property and value set are called a declaration.

h1 {
  color: blue;
}

You can list as many declarations as you want. A group of declarations are called a declaration block.

h1 {
  color: blue;
  font-weight: bold;
}

Things to note:

  • Declaration blocks are always surrounded by curly braces

    h1 {
      color: blue;
      font-weight: bold;
    {
  • Properties and values are always separated by a colon

    h1 {
      color: blue;
      font-weight: bold;
    }
  • declarations always end with semicolons

    h1 {
      color: blue;
      font-weight: bold;
    }
  • Spacing does not matter, except in measurements
    selector {
      color:    blue;	OK
      width: 	2 em;       Incorrect
      width: 	2em;        OK
    }

CSS Comments

You can type comments in to your CSS by using ( /* ) and ( */ ). Comments can span multiple lines.

/* A CSS comment */
	
/* A
Comment in 
multiple lines
*/