CSS Rules

Your pages already have headings and paragraphs, but they all look the same: black text on a white background in the browser's default font. HTML told the browser what the content is - now you have to tell it how that content should look. That's what a CSS rule is for.

We're just beginning your journey toward mastering the art of styling text on web pages. You're already familiar with basic elements like headings and paragraphs. In the following lessons and modules of this course, we'll teach you how to manipulate font weight, choose the right font family, modify text style, adjust line and letter spacing, align text, and introduce other visual effects.

In the editor in the previous lesson you already saw your first CSS rules - now you'll learn their syntax step by step. In the spirit of continuing the HTML learning process from the heading, we'll start our text styling adventure from that very element. Many practical exercises await us, through which you'll gain experience and confidence in coding. Let's be inspired by the methods of ancient Egypt, where the principle of learning by doing was followed.

The Element We'll Decorate

You can think of a CSS rule as an order for the temple painters: first you say what they should paint, and then - how. Let's start with an ordinary first-level heading, written in HTML just as in the previous modules:

1<h1>Text</h1>

The browser shows it in a large, bold font - that's its default style. To change it, we don't need to add a single character to the HTML: everything else happens in CSS.

The First Rule

And now let's color this heading red. Here is a complete CSS rule that does it:

1h1 {
2  color: red;
3}

• Line 1 - the h1 selector and the opening curly brace: we define which element the rule should apply to,
• Line 2 - CSS declaration: property (color) and value (red), separated by a colon and ending with a semicolon - specifies how the heading will look,
• Line 3 - closing curly brace, which ends the rule.

Notice what did not change: the rule changes only the text color. The size, weight and spacing of the heading stay as the browser set them, because CSS overrides only what you explicitly write.

The Selector: Who Gets the Order?

You start writing every rule by choosing a selector, because before you say "how", you have to say "who". The h1 selector picks elements by their tag name. Soon you'll learn two more kinds: the class selector, written with a dot (e.g. .frame), and the identifier selector, written with a hash (e.g. #logo). We'll come back to them in the lesson on classes and identifiers.

One Rule, Many Elements

By writing the above CSS rule, you make all first-level headings on the page red (if no other rule overrides it). It doesn't matter whether the page has one h1 or ten - the rule reaches every one of them.

What does "overrides" mean? When two rules set the same property for the same element, the browser has to pick a winner. With equally strong selectors, the rule written later wins:

1h1 {
2  color: red;
3}
4
5h1 {
6  color: green;
7}

The heading will be green, because the second rule stands lower in the stylesheet. The first one doesn't disappear or cause an error - it simply loses. You'll learn the exact rules of this contest, cascade and specificity, later in this module.

My advice: one declaration per line, and always a semicolon at the end, even after the last one. The browser forgives a missing semicolon after the last declaration, but when you add another line below it, the forgotten semicolon makes the browser discard both.

Practice

The editor below already contains three rules: for h1, p and h2. Change the color value in each of them - for example to gold, like the pharaohs' gold - and watch the preview:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>CSS - First Rule</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Welcome to the world of CSS!</h1>
11    <p>This is my first styled text.</p>
12    <h2>Another heading</h2>
13    <p>We can style different elements using CSS.</p>
14</body>
15</html>

Notice that you don't change a single letter in the HTML file - the whole look lives in the style.css file. Remember: a CSS rule is an order for the temple painters - the selector says which wall to paint, and the declaration says in what color.