A few weeks ago, I showed you what all the various bits and pieces of HTML are called in the HTML Terminology tip. Today we’re going to find out what all the basic CSS terms refer to.

Let’s use this CSS as a starting point:

.example {
    color: green;
    font-weight: bold;
}

That entire thing is called a rule. In older versions of the CSS specification it was also referred to as a rule set.

The first part of this rule is the selector:

.example

The selector specifies which elements this CSS rule applies to. It selects the elements (hence the name). In this case this CSS rule applies to all elements with the example class.

CSS rules can have multiple selectors, separated by commas, like this:

.example, h2, #primary

That would select all elements with the example class, all h2 elements, and the elements with an id of primary.

The second part of our example rule above are the declarations, which is everything between the curly braces:

color: green;
font-weight: bold;

The declarations define how the elements specified by the selector will be altered. In this case there are two declarations, one to make the foreground color green, and the other to make the font weight bold.

Each declaration is made up of a property and a value. Take this declaration, for example:

color: green;

In this declaration the property is color and the value is green.

A CSS rule can have as few or as many declarations as you wish.

Now you know the basics of CSS terminology!