Modules > CSS Basics > CSS Terminology

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

Related Resources

• How CSS works [MDN Tutorials]
• CSS syntax [MDN Tutorials]

Modules > CSS Basics > CSS Terminology