Building Websites for Beginners: 11. Selectors and Rulesets
Tags: beginners, css, webdev, tutorial
Published: 2020-12-24 15:41:44

# Selectors and Rulesets
CSS stylesheets are composed of a series of rulesets, which describe how the browser should style a particular element. They are made up of a `selector` (which is what the browser uses to determine which elements the ruleset should be applied to) and one or more sets of properties and values. A `property` is an aspect of the element that can be changed (such as the colour or font) and the `value` is what that property should be set to (e.g. red or Times New Roman). Consider a simple example:
```
p {
    color: red;
}
```
This simple ruleset will set all `p` elements on the page to have the colour<sup id="a1">[1](#f1)</sup> red. Here, `p` is the selector and refers to all `p` elements on the page; the opening and closing curly braces `{}` enclose the ruleset; `color` is the property; and `red` is the value, following the property after a colon `:` and ending in a semi-colon `;`.

When applied to some sample elements this ruleset would have the following effect:

![A black heading and unordered list with a red paragraph.](https://dev-to-uploads.s3.amazonaws.com/i/njj8zis8lwn7eycob34n.png)

Any property/value pairs defined inside of the ruleset will be applied to all elements that match the selector, so if we wanted to also set the font of paragraphs to Times New Roman we could add that property to the ruleset like so:
```
p {
    color: red;
    font-family: "Times New Roman", Times, serif;
}
```
The `font-family` property accepts a comma separated list of fonts. If the visitor does not have the leftmost font installed on their device, the browser will work its way right until it finds one that is available to use. In the case of the final `serif` declaration this is a generic family name and a final fallback. All fonts with spaces in their names must also be enclosed in quotation marks.

Our example will now display like this:
![A black heading and unordered list with a red paragraph in Times New Roman.](https://dev-to-uploads.s3.amazonaws.com/i/vxsj58ddeh4ajq8wfjws.png)

What if we wanted to apply our ruleset to more than one type of element? It is quite likely that if we set the colour and font of our paragraphs we might want to also use the same setting on list items. We could create another identical ruleset with a different selector, but CSS also allows use to specify multiple selectors for a single ruleset by separating them with commas, like so:
```
p, li {
    color: red;
    font-family: "Times New Roman", Times, serif;
}
```
Which when applied to our example will cause the browser to render it like this:
![A black heading with a red unordered list and paragraph in Times New Roman.](https://dev-to-uploads.s3.amazonaws.com/i/t5ni9gp4z1z0so9tq74p.png)

## Inheritance
Any properties that you don't explicitly set values for in a ruleset will instead use the browser defaults<sup id="a2">[2](#f2)</sup>. We can exploit this behaviour to make our styles apply to more elements without adding each one to the selector, as many properties (including the `color` and `font-family` properties we have already used) default to a value of `inherit`.

The `inherit` value means that the element will take the `computed value` for that property from its parent. Certain properties in CSS can take a value that includes a calculation. The value that we set in our stylesheets is referred to as the `specified value` and the value that is actually applied to the element is known as the `computed value`.

An example of this is when using one of the relative `length` units. Properties in CSS that accept a `length` unit, such as the `font-size` (somewhat confusingly this accepts a length), can either be specified in absolute units, such as pixels `px`, or relative units such as `em`s. 1 `em` is equal to the computed font-size of the parent element.

Lets look at a simple example:
```
ul {
    font-size: 20px;
}

li {
    font-size: 0.5em;
}
```
Here, the `ul` element has its `font-size` property set to `20px`; the `specified value` is `20px` and the `computed value` is also `20px`. In contrast to this, the `li` uses a relative length of `0.5em`; its `specified value` is `0.5em`, but its `computed value` is `10px` (20 x 0.5 = 10).

In the case of a property that has its value set to `inherit`, the `computed value` for it will be the same as the `computed value` of the first ancestor that has a `specified value` other than `inherit`. The browser will work its way up the tree of ancestors until it finds one that has a value explicitly set, compute this, and then apply it to all of its descendants that inherit from it.

What this means in practice, is that we can set the value of a property on an element, and all of its descendants will inherit that value (if the properties' default value is `inherit` of course.)

Both the `color` and `font-family` properties that we used in the previous example default to a value of `inherit`. This means that we could set those on the `body` element<sup id="a3">[3](#f3)</sup>, and every other element in our example would inherit them like so:
```
body {
    color: red;
    font-family: "Times New Roman", Times, serif;
}
```
Our example will now look like this:
![A red heading, unordered list and paragraph in Times New Roman.](https://dev-to-uploads.s3.amazonaws.com/i/foo4sqtbjcmn0a8sz1e7.png)

Every line of CSS that you write increases the size of your webpage, which means it takes longer to download for visitors. If you have specified the same styles for multiple elements, and then decide you want to change how they are displayed, you would also have to update those styles in multiple places. The fewer rulesets you can use to achieve the look you want, the better it is for both yourself and your users.

## Conclusion
That's quite a bit we've gone over in this chapter. CSS can be quite deceptive in terms of how easy it is to write, but it still remains very powerful.

In the next chapter we will learn how to actually load a stylesheet into a HTML document and explore what happens when you don't want all elements of the same type to have the same styles.


### Footnotes
<ol>
    <li id="f1">CSS uses the American spelling of the word. For those of you, like myself, who are used to the British spelling this can be very confusing at first. Unfortunately, we are stuck with it this way, but you soon should be able to switch between the two in your head with little difficulty.</li>
    <li id="f2">Each browser has its own default stylesheet that applies to all elements until a document overrides those styles with its own. These stylesheets are a little different for each browser, so an unstyled element may appear a little differently for visitors using different browsers.</li>
    <li id="f3">As the body is the ancestor for all elements rendered on the page, all elements will inherit from it.</li>
</ol>

---
This is a chapter from my <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a> book, Building Websites for Beginners. You can read everything that I have written so far on the [book website](https://bezpowell.github.io/building_websites_for_beginners/), and can see the [source code on github](https://github.com/BezPowell/building_websites_for_beginners).