til / Structure of CSS

I tend to forget the names of a CSS rule’s parts. By writing this I hope I will remember better. Or at least have a place to go when I forget again. This was originally posted on my devlog.

The basic blocks of CSS are properties and values.¹

• Properties are human-readable identifiers that describe what is being styled.
• Values indicate how to style that property.

When these are paired together they create a CSS declaration.

/*
Property: color
Value: red

Together they form a CSS declaration.
*/
color: red;

CSS declarations are found within CSS declaration blocks. When CSS declaration blocks are paired with selectors (or a list of selectors) they produce CSS rulesets (or CSS rules).

/*
p is a selector. Together with the CSS
declaration block it creates a CSS rule.
*/
p {
  /* Multiple declarations form a CSS declaration block */
  background-color: black;
  color: white;
}