The CSS Rule

How to Enchant Your Elements with Style

Selectors and declarations are the spells that breathe new life into your webpage’s elements. Every spell begins with a selector, followed by a declaration block. Don’t worry — it sounds more complicated than it is. The block contains property-value pairs that define how your element looks. And it doesn’t stop at one transformation. Add a few more, and your element will look like a wizard with style — from its color to its border.

Ah, and don’t forget the semicolon — that small, unassuming detail. Leave it out, and the next spell gets stuck, rendering your magic ineffective. With that said, let’s delve into the mysteries of CSS rules and ensure your spells work perfectly — and look amazing in the process!

Let’s Keep Going

Technical Terms
Selector
Declaration
Property-value pair

The Anatomy of a CSS Rule

Some magical terms you should master

Always these foreign words

The who’s who of technical terms

Selector: The magical pointer.
Declaration { … }: The spell itself.
Property: What you want to change.
Colon (:): The invisible magician connecting property and value.
Value: How it should look.
Semicolon (;): The final wand flourish to complete the spell.

Example:

Selector { property : value ; }

Selector

The Magical Pointer

The selector is your wand, determining which elements on your webpage feel the power of CSS. With a precise gesture, you point to what you want to transform—whether it’s a proud heading, a humble paragraph, or an image in need of a touch-up. The selector is the key to unleashing your magical styles on the right elements.

h1, .classname, ...

Declaration

The Spell of Styling

The declaration is the core, the actual spell that reshapes the appearance of your elements. It consists of a property and a value, which together define the shape and appearance. Here, you change colors, sizes, and styles. The semicolon at the end acts as the final wand flourish—without it, the magic fizzles out, leaving your spell ineffective.

h1 {

}

Property-Value Pair

The Secret Formula

Every declaration has its secret formula: the property-value pair, the true source of magic. The property defines what you want to change, and the value determines how it should look—be it a shimmering color or a new shape. The colon in between is the invisible magician, connecting the two and making the magic possible.

h1 {
    font-family: Georgia, serif;
}

In this lesson, you have learned…

How a selector works to specifically target HTML elements for CSS styling.
Why a declaration is the heart of a CSS rule for defining an element’s appearance.
How property-value pairs work together to change the color, size, or font of an element.
The role of the colon and semicolon in writing CSS rules correctly.
How using clean syntax ensures your CSS styles are applied without errors.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Wanderer’s Script

At the edge of the forest of Sunnyside Fields lives a wise wanderer named Kael Windstride. Kael collects ancient texts and imbues them with magical fonts to preserve their meaning. To understand his spell for fonts, you must decode the structure of a CSS rule and discover how the magic works.

Your Task: The Magic of Fonts

Kael has written a CSS rule to transform the fonts of an ancient text.

Follow these steps to complete the task:
Set Up the HTML Content and include the following in the body section:
An h1 heading stating “Welcome”.
A paragraph stating “to the fabulous world of Aetheron”.

CSS

<style>
    body {
        font-family: Georgia, 'Times New Roman', Times, serif;
        color: brown;
    }
    p {
        font-style: italic;
    }
</style>

Embed the Style:
Add this declaration in the head section:

HTML

<style>
    body {
        font-family: Georgia, 'Times New Roman', Times, serif;
        color: brown;
    }
    p {
        font-style: italic;
    }
</style>

Find the Selectors: Identify the selectors Kael used. Which elements are being targeted by the CSS rule?
Understand the Declarations: Examine the two declarations:
- What is the property in each declaration, and what value is assigned?
- What is the purpose of font-family and font-style? How do they influence the appearance of the text?
Role of the Colon and Semicolon:
- Why is the colon necessary? Explain what happens if the colon between the property and the value is removed.
- What happens if the semicolon is omitted? Remove the semicolon after font-family in Visual Studio Code, test it, and describe any error messages or behaviors you observe.
Experiment with Fonts: Change the Font-Family Value:
- Replace font-family: 'Courier New', monospace; with another font, e.g., 'Times New Roman', serif;. What changes do you notice in the text?
- Replace font-style: italic; with font-style: normal;. How does it affect the text? What other values are possible for font-style?
- Add a new declaration before font-style: italic;, such as font-weight: bold;. Observe how it impacts the appearance of the text.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-Declaration</title>
    <style>
        body {
            font-family: Georgia, 'Times New Roman', Times, serif;
            color: maroon;
        }

        p {
            font-style: italic;
        }
    </style>
</head>

<body>
		<h1>Welcome</h1>
    <p>in the fabulous world of Aetheron</p>
</body>

</html>

Let’s Keep Going