Anatomy of a Rule
A CSS rule pairs a selector with a declaration block. The declaration block is wrapped in curly braces and contains one or more declarations, each made of a property and a value separated by a colon, ending with a semicolon.
Rule Structure
<style>
/* selector */
h1 {
/* declaration: property: value; */
color: darkslateblue;
font-size: 32px;
}
</style>
<h1>Styled Heading</h1>Output
Terminology
| Term | Meaning |
|---|---|
| Selector | What element(s) the rule targets, e.g. h1 |
| Declaration Block | The { ... } containing all declarations |
| Declaration | A single property: value; pair |
| Property | The style aspect being changed, e.g. color |
| Value | The setting applied to the property, e.g. darkslateblue |
Multiple Declarations
A single rule can contain as many declarations as needed. Each one ends with a semicolon — while the last one technically doesn’t require it, it’s best practice to always include it.
Multiple Declarations Example
<style>
.card {
background-color: #f4f4f4;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
</style>
<div class="card">A styled card</div>Output
CSS Comments
/* This is a single-line comment */
/*
This is a
multi-line comment
*/
p {
color: black; /* inline comment */
}Missing Semicolons Break the Next Declaration
Forgetting a semicolon merges the next declaration into the value of the previous one, silently breaking both. Always terminate every declaration with a semicolon.
Best Practice
Format one declaration per line and always end with a semicolon — it makes diffs cleaner and prevents subtle bugs when a new declaration is added later.
Comments
CSS comments are written between /* and */. They can span multiple lines and, like HTML comments, are ignored entirely by the browser.