CSS Syntax: The Structure of a Rule

Learn how CSS rules are written, how comments work and how a stylesheet is linked to HTML.

📘 Theory

The anatomy of a CSS rule

Selector, braces and declarations.

A rule has two main parts: the selector, which decides what elements are targeted, and the declaration block, which defines the visual changes to apply.

Inside the braces, every declaration follows the same pattern: property, colon, value and semicolon. That consistency is part of what makes CSS easy to scan once you get used to it.

`selector { property: value; }`
Multiple declarations live in the same block.
Even though the last semicolon can be omitted, keeping it is a good habit.

Comments in CSS

Useful for notes or temporary experiments.

Comments help you document intent or disable a rule briefly while debugging. They are ignored by the browser, so they do not affect the final rendering.

A practical rule: keep comments short and purposeful. If a comment repeats what the code already says, it is probably not helping.

How CSS is linked to HTML

External files are the default for real projects.

The recommended pattern is an external `.css` file linked from the head with ``. That allows reuse across multiple pages.

For quick tests, a `` tag inside the page head is enough, but it should not replace a clean stylesheet structure in a larger project.

Using `url()` in CSS

Connect your styles to images, fonts and other assets.

`url()` appears in properties such as `background-image` and in rules like `@font-face`. The main thing to understand is how the browser resolves the path.

If the URL is relative, it is resolved from the location of the CSS file. If it is absolute, it points to an external resource.