Understand CSS rules and declarations

A rule needs an element to style

Imagine an HTML page containing <h1>Welcome</h1>. The h1 rule shown in Syntax below tells the browser how that heading should look. The HTML supplies the heading text and its meaning; the CSS supplies presentation. If the page has no h1, that rule has nothing to match. The interactive preview below uses an h2 inside its sample card, so its editable rule targets .card h2 instead.

Selectors can target element names, classes, IDs and other relationships. Start with an element selector such as h1, then use the Basic Selectors guide when you need more precise control.

• Make an HTML page and a CSS file
• Basic Selectors

Selector and declaration block

In h1 { color: blue; font-size: 32px; }, h1 is the selector. The opening { starts the declaration block and the closing } ends it. The browser looks for h1 elements in the document, then considers the declarations inside the block for each match. Braces keep the declarations for this rule together; another selector can start a new rule after the closing brace.

Indenting declarations on separate lines does not change their meaning, but it makes the rule easier to scan and edit. A CSS file normally contains many rules, one after another.

Properties, values and punctuation

color: blue; is one declaration. color is a property: the aspect of presentation to change. blue is its value. The colon separates the property from its value. The semicolon finishes that declaration before the next one begins. font-size: 32px; is a second declaration: it changes the text size to 32 CSS pixels.

Several declarations can appear in one block because they affect different properties of the same matched elements. If two declarations for the same property compete, the cascade decides which value applies. A missing semicolon after the last declaration is sometimes accepted, but writing it consistently makes adding the next declaration safer.

• Color Values
• Font Properties
• Specificity

Comments and common mistakes

A CSS comment starts with /* and ends with */. It can occupy one line or several lines, and the browser does not use its text as a style rule. For example, /* Heading colour */ can explain why a particular rule exists. CSS does not use // for comments in a stylesheet.

A missing brace can make following rules parse differently than intended. A missing colon, a misspelled property or an invalid value can cause a declaration to be ignored. When the result is unexpected, compare the rule with the Syntax example, then inspect the element in browser developer tools to see whether the selector matches and which declaration wins.

styles.css — comment and rule

/* Give the main heading a clear visual hierarchy. */
h1 {
  color: blue;
  font-size: 32px;
}

Use the rule in a page

Once you can identify the selector, declaration block, property and value, put the rule in styles.css and link that file from index.html. Then experiment with one value at a time. The next guide compares inline, internal and external CSS without changing the structure of a CSS rule.

• Create your first stylesheet
• Ways to add CSS to HTML

Syntax

h1 {
  color: blue;
  font-size: 32px;
}

Examples

/* The preview card contains an h2 heading. */
.card h2 {
  color: blue;
  font-size: 32px;
}

<article class="card"><h2>My first styled heading</h2><p>This paragraph keeps its normal size while the heading changes.</p></article>

Best practices

• Indent declarations and use one declaration per line so rules remain readable.
• End declarations with semicolons consistently and close every declaration block.
• Use /* ... */ for useful explanatory comments; keep comments accurate when code changes.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

Related CSS documentation

Specifications & further reading

• MDN: Introduction to CSS syntax
• MDN: CSS comments