Syntax
Understand selectors, properties, and values in a CSS rule.
Syntax
selector { property: value; property: value; }A CSS rule is made of a selector and a declaration block.
- The selector points to the HTML element you want to style.
- The declaration block contains one or more declarations inside curly braces
{ }. - Each declaration is a
property: value;pair.
In h1 { color: blue; }, the selector is h1, the property is color, and the value is blue.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer writes a rule targeting .alert to set a red background and white text for error messages across an app.
- A beginner reads a minified stylesheet and recognizes the selector-property-value pattern to understand each rule.
- A code reviewer spots a missing semicolon in a declaration block that caused the next property to be silently ignored.
More examples
Basic rule with declarations
Shows the fundamental selector-plus-declaration-block where each property/value pair ends with a semicolon.
p {
color: #333;
font-size: 1rem;
}Class and ID selector rules
Contrasts a reusable class rule (.card) with a unique ID rule (#header) to show how selector type controls scope.
.card {
background-color: #fff;
border: 1px solid #ddd;
padding: 16px;
}
#header {
background-color: #2965f1;
color: #fff;
}Multi-property button styling
Demonstrates a realistic multi-declaration rule that fully styles a button with a single selector block.
button {
background-color: #2965f1;
color: #fff;
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
font-size: 1rem;
}
Discussion