Hack University - Your first stylesheet

From lesson 3-3, the element holding the page's dominant content, and the landmark screen readers jump to first, is main.

Landmark	Region
`header`	the banner
`nav`	the menu
`main`	the primary content
`footer`	the contact and copyright line

Styling those landmark regions starts now, so their names matter twice over. They double as CSS selectors.

Anatomy of a CSS rule

CSS exists to keep appearance out of the markup. Before it, styling lived inside HTML itself, with font tags on every element, so restyling a site meant editing every page by hand.

With CSS one stylesheet styles a thousand pages, and one edit changes them all. That leverage is the point of this unit.

CSS is a list of rules, where each rule names which elements through a selector and which styles through declarations.

h1 {
  color: darkblue;
  font-size: 40px;
}

Piece	Example
selector	`h1`, targeting every `h1` on the page
property	`color`
value	`darkblue`

Each declaration is a property: value; pair inside the braces, and the semicolons are not optional.

The usual way to attach CSS is a separate file linked from the head, using the skeleton from lesson 2-1:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Quick experiments can also embed rules directly in the head between <style> and </style> tags. The examples in this course keep CSS in its own labelled block, which behaves like a linked stylesheet.

One CSS rule: the selector picks the elements, and each declaration inside the braces sets one property to one value.

The three selectors you will use daily

p { color: gray; }             /* type: every <p> */
.warning { color: red; }       /* class: every element with class="warning" */
#site-title { color: black; }  /* id: the ONE element with id="site-title" */

And in the HTML:

<h1 id="site-title">Hack University</h1>
<p class="warning">This action cannot be undone.</p>

Selector	Syntax	Matches
type	a bare tag name	every element of that kind
class	a dot plus the name	every element carrying the class
id	`#` plus the id	the single element with that id

The class selector is the workhorse, because an element can carry several classes as in class="warning small", and one class can be reused on many elements. An id must be unique on the page, which limits how useful it is for styling.

Two combinators cover most of the rest. A comma shares styles across selectors, as in h1, h2 { font-family: Georgia; }, and a space targets descendants, so nav a { ... } means links inside the nav.

Selecting a class

Every element with class="card" is selected by .card.

Selector	Looks for
`.card`	`class="card"`
`#card`	`id="card"`
`card`	a `<card>` element, which does not exist

Class selectors start with a dot, and forgetting it produces a rule that silently matches nothing. The third row explains why the mistake is so quiet, since a selector for a nonexistent element type is valid CSS that simply never applies.

One rule per kind of selector

Three rules, one for each selector kind, with the HTML left untouched.

CSS

p {
  color: gray;
}

.warning {
  color: red;
  font-weight: bold;
}

#site-title {
  color: darkblue;
}

Selector	Kind	Matches
`p`	type	every paragraph
`.warning`	class	anything with `class="warning"`
`#site-title`	id	the one element with that id

A rule is always selector { property: value; }, and the class selector needs its dot.

The warning paragraph is targeted by two rules at once, and the red wins. The next two lessons explain exactly why that happens, since guessing at it is how CSS starts to feel unpredictable.