CSS Syntax
A CSS rule is made of a selector and a declaration block. The selector picks which elements to target; the block lists what to change about them.
Anatomy of a CSS rule
Vocabulary
| Term | What it is | Example |
|---|---|---|
| Selector | The pattern that picks elements. | h1, .btn, #hero |
| Declaration block | Everything between the curly braces. | { color: red; font-size: 14px; } |
| Declaration | One property: value pair. | color: red |
| Property | The thing you want to change. | color, margin |
| Value | What to set the property to. | red, 20px |
Tip: The semicolon after each declaration is technically optional on the last one. Leave it in anyway — adding new lines later won't break.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Syntax</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Complete the rule that makes every paragraph dark grey.
p { color
#333; }
Property and value are separated by a single character.
Discussion
Loading…