A CSS rule instructs the browser to select elements and apply styles or effects to them. Each rule combines a selector with one or more declarations. section 1.0 section 1.8
Read a rule from the outside in:
- The selector identifies the elements, such as h1 or a comma-separated list such as h1, h2. section 1.3.2
- Each declaration pairs a property with a value, such as color: crimson. section 1.3.2
- Invalid declarations are ignored while valid declarations in the same rule still apply. section 1.3.2
- Specificity determines how competing rules combine, allowing a more specific selector to override a broader one. section 1.8 section 8.4.2
Color every heading
Place an embedded rule in the document head: h1, h2, h3, h4, h5, and h6 all receive the crimson color. The same rule can contain several declarations, each written on its own line for readability. section 1.3.2 section 1.7.2
Listing 1.2 Embedded CSS
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1, h2, h3, h4, h5, h6 {
color: crimson;
}
</style>
</head>
<body>
...
</body>
</html>
Inspect a complete embedded rule inside a minimal HTML document. section 1.3.2
Rules may be formatted across multiple lines or on one line; choose a style that remains easy to understand. A final declaration semicolon is optional, but consistent formatting improves maintenance. section 1.7.2
