Summary

In this lesson, we learned that:

• A rule consists of a selector and declarations in curly braces. A declaration consists of a property and a value: h1 { color: sienna; }.
• Comments are written between /* and */, and the browser ignores them.
• Selectors select the elements that a rule styles:
  • the universal selector * selects all elements,
  • a type selector selects all elements of a type, for example h2,
  • a class selector selects the elements with a class, for example .group for class="group". Many elements can share a class, and an element can have several classes,
  • an id selector selects the one element with an id, for example #breeds,
  • an attribute selector selects elements by their attributes, for example [target] or [target="_blank"],
  • a pseudo-class selects elements in a state, for example :hover under the mouse pointer.
• Selectors can be combined:
  • a comma groups them: h1, h2 selects both,
  • chaining, without a space, selects the elements that match all the parts: a[target="_blank"], .group:hover,
  • a space selects descendants at any depth: footer p,
  • > selects only children: main > div.
• When several rules set the same property for an element, the cascade decides which one wins. The more specific selector wins: an id over a class, an attribute selector or a pseudo-class, and those over a type, while * doesn’t count. The parts of a selector add up. Between equally specific selectors, the one written later wins. Inline styles win over all selectors.
• Some properties, mostly those of text, such as color, font-family and text-align, are inherited by the descendants of an element, unless the descendants have their own rule. Others, such as border and background-color, are not.

In the next lesson, Colors, we’ll look at all the ways to write colors in CSS.