CSS Syntax

A selector and a declaration block are the two parts of every CSS rule.

The selector picks out the HTML element to style.

Curly braces wrap the declaration block, which contains one or more declarations with semicolons between them.

A declaration pairs a CSS property name with a value, using a colon to separate the two.

Example

This rule centers every <p> element and colors its text red.

A web page with CSS in a `<style>` block that targets all `<p>` elements.

Make every paragraph red and center-aligned. Include a couple of paragraphs so the rule is visible.

> Output: complete HTML page

Prompt

A web page with CSS in a <style> block that targets all <p> elements. Make every paragraph red and center-aligned. Include a couple of paragraphs so the rule is visible.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Syntax Example</title>
<style>
p {
  color: red;
  text-align: center;
}
</style>
</head>
<body>

<p>Every paragraph on this page is red and centered.</p>
<p>This is another paragraph styled by the same CSS rule.</p>

</body>
</html>

Example Explained

The selector is p, so the rule targets the HTML element <p>.
The property color has the value red.
The property text-align has the value center.

Later chapters go much deeper into CSS selectors and properties.