CSS Ruleset Terminology

Avatar of Chris Coyier
Chris Coyier on

I was trying to think of the name of a thing in the CSS vernacular the other day. It made me think we should have some kind of reference right here on CSS-Tricks, as a site with CSS in the title probably ought to have! So, here’s the basics.

Breaking that down…

  • The whole thing is a ruleset.
  • The curly braces and everything inside is a declaration block.
  • The bit before the opening curly brace is a selector.
  • Each key/value pair, as separated by a colon and ending in a semicolon, is a declaration.
  • In those key/value pairs, the key is a property (or property name), and the value is a value (or property value).

Marco Biedermann once created this diagram out of HTML and CSS itself, which I think is exceedingly clever:

See the Pen CSS Terminology by Marco Biedermann (@marcobiedermann) on CodePen.