CSS Structure and Formatting

A browser will understand a CSS rule even when it's squeezed into a single line, but a human won't - which is why the way you write code matters almost as much as what it does.

Imagine a papyrus on which a scribe wrote sometimes in tiny signs, sometimes in huge ones, with no gaps between the lines. The content is the same, but reading it is torture. A good developer can be recognized not only by their skills but also by the readability of their code.

One Rule, Two Ways of Writing It

Look at two versions of the same rule. The first looks like "minified" code, that is, code stripped of unnecessary spaces to make the file smaller:

h1{color:red;background-color:gold}

It works, but it's hard to find a specific declaration in it quickly, especially when there are ten of them instead of two. And here is exactly the same rule, formatted according to the principles we follow throughout the course:

h1 {
  color: red;
  background-color: gold;
}

The browser treats both versions identically - spaces, indentation and new lines between the parts of a rule don't change how it works. The only thing that changes is how quickly a human can read it, for example you, a month from now.

Principles of a Readable Rule

What does it mean for code to be readable? For now, it's enough to watch your indentation in HTML and CSS. Each CSS rule should be structured the same way:

h1 {
  color: red;
}
p {
  color: blue;
}

How to create a CSS rule:

1. Selector always at the beginning of the line, space, and opening curly brace.
2. Indentation that is equal in every declaration. It's important that the declaration line looks like this - property: value;. Remember the space after the colon and the semicolon at the end.
3. Closing curly brace.

Indentation is usually two spaces, as in our examples, or four - pick one and stick to it throughout the file.

Text Color and Background

Since a rule can have many declarations, let's meet two properties you'll need right away. color sets the text color, and background-color sets the background color:

p {
  color: #1E90FF;
  background-color: #FFD700;
}

The paragraph text will be blue like the Nile, and the background gold. You can give colors by name (red, gold) or as a hexadecimal code starting with a hash, e.g. #FFD700 - exactly the same gold as gold, just written in numbers. There are also the rgb() and hsl() notations, which describe a color by the numbers of its components. In rgb(205, 133, 63), the three numbers from 0 to 255 say how much red, green and blue the color has; the code #CD853F writes the same numbers in hexadecimal, two characters each (CD is 205).

The background can also be set with the shorter background property. It's a so-called shorthand: besides the color, you can give it a background image, among other things. To start with, I recommend background-color - it's immediately clear that you're changing only the color.

Three more things will come in handy in the next exercise. padding is the space inside an element, and margin is the space outside it. You write them like any other declaration, and we'll cover them in detail in the lesson on the box model. A selector can also point to a class: .gold, with a dot at the beginning, reaches only elements with the class="gold" attribute you know from the first module.

One more thing will be useful: text between /* and */ is a comment, which the browser skips. To "uncomment" a rule, remove these characters around it so the browser reads it again.

Styling Multiple Elements

In the example with the principles of a readable rule, the heading got the color red and the paragraph blue - each in its own rule. But what if the same color should be applied to many elements at once?

The answer is simple - you can list selectors one after another and separate them with commas:

h1, p {
  color: blue;
}

The blue color will be applied to h1 and p elements. Other elements, e.g. h2, keep their current color, because the rule reaches only the selectors on the list. Watch the comma: h1 p, with a space instead of a comma, selects paragraphs placed inside h1 - you'll learn such selectors in the lesson on advanced selectors. With a longer list, I recommend writing each selector on a separate line, followed by a comma.

Practice

In the editor below you'll see grouping in practice: h1 and h2 share a color and a typeface, while div and span share a background and spacing. Notice that div and span then also get their own separate rules:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS - Formatting and Grouping</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Main heading</h1>
    <p>This is a paragraph that will be styled.</p>
    <h2>Second heading</h2>
    <p>Another paragraph with text.</p>
    <div>This is a div - a container element</div>
    <span>This is a span - an inline element</span>
</body>
</html>

The group sets a shared base, and the separate rules add the differences. A good scribe is known by the evenness of his lines, so shape every rule the same way - selector first, declarations indented and written as property: value;, closing brace at the end - and when several elements deserve the same look, list their selectors after a comma instead of copying the block twice.