CSS Structure and Formatting

A good developer can be recognized not only by their skills but also by the readability of their code.

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:

1h1 {
2  color: red;
3}
4p {
5  color: blue;
6}

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 semicolon at the end.
3. Closing curly brace.

Styling Multiple Elements

In the example above, we set the color red for the heading and paragraph. But what if the red color should be applied to many elements?

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

1h1, p {
2  color: blue;
3}

The blue color will be applied to h1 and p elements.

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.