Anatomy of a CSS Declaration

With declarations, we can target HTML elements to add style to them. Declarations live inside declaration blocks.

Anatomy of a CSS Declaration Block.

Anatomy of a CSS Declaration Block.

  • Selector – This is the HTML element that we’re targeting. It can be an HTML tag, or it can be an ID or a Class (more about those later). The selector in this example is the anchor tag.
  • Declaration Block Start – An open curly brace { marks the start of a declaration block.
  • Property: This is what we’re changing – the text color in this example. #ffffff is the color code for white.
  • Property/Value Separator: The colon : appears after the property.
  • Value: This is the value of the property. In this example, it’s white.
  • Declaration: The property/value pair combined is the declaration, indicated by the orange box in the above diagram.
  • Declaration Separator: The semi-colon marks the end of the declaration.
  • Declaration Block End: A closing curly brace } marks the end of a declaration block.

Declaration blocks can contain multiple declarations and selectors:

Declaration blocks with multiple declarations (top) and multiple selectors / declarations (bottom).

Declaration blocks with multiple declarations (top) and multiple selectors / declarations (bottom).