Anatomy of a CSS Rule

example 1: li { color: #0F0; font-size: 2em; }

  1. li is the selector, which defines which part of the HTML to apply the CSS to.
  2. color and font-size are properties, which define what specific presentational aspects of the targeted element you want to set.
  3. #0F0 and 2em are values, which define what the properties should be set to.
  4. color: #0F0; and font-size: 2em; are statements.
  5. The entire thing, li { color: #0F0; font-size: 2em; } is called a rule. Semicolons separate statements. You can have an unlimited number of statements in each rule.

 

example 2: .silly { background-color: pink; width: 100px; }

  1. .silly is the selector, which defines which part of the HTML to apply the CSS to.
  2. background-color and width are properties, which define what specific presentational aspects of the targeted element you want to set.
  3. pink and 100px are values, which define what the properties should be set to.
  4. color: #0F0; and font-size: 2em; are statements.
  5. The entire thing, .silly { background-color: pink; width: 100px; } is called a rule. Semicolons separate statements. You can have an unlimited number of statements in each rule.