Add CSS to a page
Anatomy of a CSS rule
Read selectors, declaration blocks, properties, and values, then write small rules using valid CSS syntax.
6 minute lesson
~~~
A CSS rule has a selector and a declaration block:
.card {
padding: 1rem;
border: 1px solid black;
}.card is the selector. It chooses elements whose class contains card.
Inside the braces, each declaration has a property and value separated by a colon. A semicolon ends the declaration.
Whitespace does not usually change meaning, so this is valid too:
.card{padding:1rem;border:1px solid black}The expanded form is easier to scan and debug.
Unknown properties and invalid values are ignored. The browser keeps processing the rest of the stylesheet, which makes CSS resilient but can also hide typing mistakes.
Lesson completed