Vocabulary & Syntax

Before we get started, it’s important that we’re all on the same page with some of the basic CSS vocabulary.

What even is CSS?

CSS stands for Cascading Style Sheets.

The stylesheet part is pretty straight forward, it’s the styles that we apply to our HTML pages. Without CSS, the web would look pretty boring.

The cascade is a little more complex, but in essence, it’s the algorithm the browser uses to determine which values to use. There are several different things the browser looks at, such as the origin of the style, the specificity, and the order of appearance, among other things.

We’ll be talking more about this a little later on.

The basic syntax

We’ll use this example, which would be for styling the <h1> on a page.

h1 {
  font-family: system-ui;
  font-size: 3rem;
  color: #efefef;
}

The entire code block is the ruleset or rule.

A ruleset starts with a selector, which, as the name implies, selects an element or elements.

selector

h1 {
  font-family: system-ui;
  font-size: 3rem;
  color: #efefef;
}

You can have multiple selectors as part of a single ruleset:

h1,
h2,
h3 {
  color: #efefef;
}

After the selector(s) you will always have an opening curly brace {, followed by one or more declarations, and then a closing curly brace } to close the ruleset.

declarations

h1 {
  font-family: system-ui;
  font-size: 3rem;
  color: #efefef;
}

Every declaration starts with a property, followed by a colon.

properties

h1 {
  font-family: system-ui;
  font-size: 3rem;
  color: #efefef;
}

After the colon, there is the value for that property.

values

h1 {
  font-family: system-ui;
  font-size: 3rem;
  color: #efefef;
}

You can have as many declarations within a rule as you’d like.

As a general best practice, every property: value pair should be on it’s own line.

See the Pen Starter - No CSS by Kevin (@kevinpowell) on CodePen.