Your First CSS Rule

After this lesson you can

• Name the parts of a CSS rule: selector, declaration, property and value
• Write a CSS rule with a selector and declarations, using curly braces, colons and semicolons correctly
• Explain what the browser does with a CSS declaration it can't read

Key takeaways

• A CSS rule says which elements to style (the selector) and how to style them (the declarations, between curly braces).
• Each declaration is a property, a colon, a value and a semicolon, such as color: saddlebrown;
• A selector that starts with a dot, such as .price, picks every element marked with that class.
• The browser skips a declaration it can't read, without any error message, and keeps going with the rest.

The coffee shop's owner wants the menu on a warm cream background, with the heading in the shop's brown. A class assignment says "make every heading dark green". A teammate asks you to make the prices bold. Each of those is one CSS rule, a few lines long, and once you know the shape of one rule you can read every stylesheet ever written. In this lesson you write your first rules on The Daily Grind's menu from Setup: VS Code, a Browser and Node.js.

A rule is an instruction with a target

Picture a note left for the person who paints the coffee shop's signs: "Every price tag: bold, coffee brown." It says who the instruction is for (every price tag) and what to change about them (bold, coffee brown).

A CSS rule is that note, written for the browser. It names which elements on the page it's for, then lists what to change about them and what to change it to. The browser reads every rule in the stylesheet and applies each one to the elements it names.

The shape of a rule

Every CSS rule has this shape:

selector {
  property: value;
}

Read it aloud the way you'd read it to someone over the phone:

• { is an opening curly brace, and } a closing curly brace. Everything between them is the list of changes for that selector.
• : is a colon. Read it as "is": color: saddlebrown reads "color is saddle brown".
• ; is a semicolon. It ends one instruction, the way a period ends a sentence.

The spaces and line breaks are for people. The browser would read h1{color:saddlebrown;} the same way, but one declaration per line, indented, is far easier to read and fix.

The name of every part

Here is a real rule, for the menu's main heading:

h1 {
  color: saddlebrown;
  font-family: Georgia, serif;
}

The whole thing, selector and block together, is the rule. A stylesheet is a file full of them.

Style The Daily Grind's menu

Open your daily-grind folder in VS Code, open the menu with Live Server, and put the editor and browser side by side. Your styles.css has the body rule from setup. Add the h1 rule under it, and give the body a text color too:

body {
  background-color: linen;
  color: darkslategray;
}

h1 {
  color: saddlebrown;
  font-family: Georgia, serif;
}

Save. The page stays its warm off-white, the text turns dark slate gray (a deep gray with a hint of green) instead of black, and The Daily Grind at the top becomes a reddish brown in Georgia. Only the main heading changed: Coffee, Bakery and Today's special are <h2> headings, which the h1 selector doesn't pick.

linen, darkslategray and saddlebrown are color names: CSS knows about 150 of them. Real brands use exact color codes instead, such as #6f4e37 for a coffee brown, the way a paint store mixes a color from the code on its chip. You'll learn to read those codes in the chapter Selectors, Color and Text.

Try it. Add a rule for h2 that makes the three section headings saddlebrown too. Save, and check that all four headings now match.

Picking the prices: a class selector

The prices aren't headings or paragraphs: in the HTML, each one is marked class="price". A class is a label you put on elements so CSS can find them, and a selector for a class starts with a dot. .price is read "dot price", and it picks every element labeled class="price".

.price {
  font-weight: bold;
  color: saddlebrown;
}

Save, and all six prices turn bold and brown at once, the five on the menu and the one in Today's special. One rule, every element with the label: that's why classes exist. The chapter The HTML You Need shows how to put classes on your own pages.

When you make a typo

Everybody mistypes CSS, and the browser's reaction surprises most people: it says nothing at all. A declaration it can't read is skipped, and the rest of the rule still works. Here color is misspelled:

h1 {
  colr: saddlebrown;
  font-family: Georgia, serif;
}

The heading keeps its Georgia font but turns back to the body's dark gray, with no error message on the page. A misspelled value, such as saddlebrwn, is skipped the same way. A missing semicolon costs more:

h1 {
  color: saddlebrown
  font-family: Georgia, serif;
}

Without the semicolon, the browser reads everything up to the next one as a single declaration: color with the value saddlebrown font-family: Georgia, serif. That's not a color, so it's skipped, and the heading loses both its color and its font. When a style doesn't show up, look for a spelling mistake or a missing colon or semicolon first. VS Code helps a little: it puts a wavy underline under a misspelled property or a missing colon or semicolon, but not under a misspelled color name. The next lesson, Look Inside Any Page with Developer Tools, shows you where the browser points out the declarations it skipped.

Try it. In your h1 rule, delete the semicolon after saddlebrown and save. Watch the heading lose its color and font. Put the semicolon back, save, and watch them return.

Check yourself

2 questions to try on the lesson page.

So what

Every stylesheet you will ever read, from a coffee shop's to a giant online store's, is made of rules with this one shape: a selector, then declarations of a property and a value. You can now read and write them.

Key terms

• CSS rule
• Selector
• Declaration
• Property
• Value
• Declaration block

Cheat sheets

• Your First CSS Rule