4.3 CSS Syntax

The purpose of CSS is to define the layout and styling of your HTML elements. The syntax is very simple:

/* A CSS rule */
selector{ property: value;}

You can read that as:

who{ what: how;}

CSS is a 3-part process:

• the selector defines who is targeted, which HTML element(s)
• the property defines what charateristic to alter
• the value defines how to alter that charateristic

This whole block (selector/property/value) is a CSS rule.

Quick example

Let’s say you want to change the color of all your blockquotes.

<blockquote>Something something</blockquote>

Focus on the tag name (and forget about the angle brackets <> and the text). In our case, all that remains is “blockquote”. There’s a direct relation between the tag name and the selector.

Let’s use that in our CSS as a selector, and let’s apply some styling:

blockquote{ background: lightgreen;}

Interesting. But now, the text color doesn’t really match the background color. Let’s improve that:

blockquote{
  background: lightgreen;
  color: darkgreen;
}

So 2 things happened:

• we added a second property/value pair, while keeping only one selector: you can set as many properties as you want for any set of selectors
• we put each property/value pair on its own line: like in HTML, the whitespace isn’t important. It’s the special characters {} : and ; that matter. As a result, you can format your CSS as you wish, to make it more readable, as long as its syntax remains valid.

The <blockquote> HTML tag is a block element. It has an inline counterpart: <q>. As they both serve the same purpose (but in different contexts), we’d like to style them identically. We could copy-paste the CSS rule and just change the selector, but there is as you would have guessed, a quicker way:

q,
blockquote{
  background: lightgreen;
  color: darkgreen;
}

Now we have 2 selectors and 2 properties. We consequently have a set of selectors and a set of properties (with their respective values).

We can have multiple selectors, multiple properties, and sometimes (but rarely) multiple values.

Comments

As in HTML, it can be handy to write CSS comments:

/* This is a CSS comment */
q,
blockquote{
  background: lightgreen;
  color: darkgreen;
}
/*
Comments are only meant to be read by humans
and won't be parsed by the computer
*/