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.

1/*
2Property: color
3Value: red
4
5Together they form a CSS declaration.
6*/
7color: 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).

 1/*
 2p is a selector. Together with the CSS
 3declaration block it creates a CSS rule.
 4*/
 5p {
 6  /* Multiple declarations form a CSS declaration block */
 7  background-color: black;
 8  color: white;
 9}
10

• MDN. How CSS is structured. Link