Select and Declare

To “style” content in an HTML document, one must write style “rules” that apply to different elements. These rules always follow the same patterns.

Selector

The first part of every rule is a “selector”, which tells the browser what element(s) the rule applies to. This is followed by a space, then a block, surrounded by curly brackets.

/* ⬇ SELECTOR - selects all h1 elements */
   h1 { <- need the open curly brace
     // this is the block
   } <- need the closing curly brace

Declaration

The portion of the rule inside of the curly brackets is known as the declaration. This tells the browser what to do to the selected element(s).

/* ⬇ SELECTOR - selects all h1 elements */
   h1 {
     /* ⬇ DECLARATION goes inside curly brackets. */
       color: white;
   }