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;

  • MDN. How CSS is structured. Link