CSS Syntax

Basic Structure of CSS Rules

CSS styles consist of a series of rulesets, each containing a Selector and a Declaration block. The browser parses these rules and applies them to corresponding elements in the HTML document.

The basic syntax structure is:

selector {
  property1: value1;
  property2: value2;
  /* More declarations... */
}

Component Breakdown

Selector: The selector is the core of CSS, used to "select" the HTML elements you want to style. It can be an HTML tag name, class name, id name, or more complex selector combinations.

Declaration block: Wrapped in curly braces {}, containing one or more declarations.

Declaration: Consists of a property and value separated by an English colon :, with each declaration ending with an English semicolon ;.

Properties: Properties are specific features in CSS used to define element styles. Each property has a name describing the type of style to modify, such as color, border, font-size, etc.

Values: Define the specific visual effect of a property, composed of numbers with units or keywords.

A Complete Example

Example

<style>
h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}
</style>
<h1>First Level Heading</h1>

This rule means: select all <h1> elements on the page, change their text color to blue, set font size to 24 pixels, and center-align them.

CSS Comments

CSS comments use the /* comment content */ syntax. The browser won't parse comment content. CSS has only this one commenting style — whether single-line or multi-line, everything goes between /* */.

Example

<style>
/* This is a single-line comment */

/*
  This is a
  multi-line comment
*/

p {
  color: red; /* Can also be written after a declaration */
}
</style>
<p>This is a paragraph example.</p>

Comments are very useful in development — you can use them to explain what certain styles do, or temporarily "disable" some styles for debugging.

Syntax Notes

1. Semicolons are separators

Every declaration must end with an English semicolon ;, telling the browser the declaration is complete. The semicolon after the last declaration can be omitted, but it's recommended to add it for consistency and to make it easier to add new styles later.

Example

<style>
/* ✅ Recommended: semicolons after every declaration */
h1 {
  color: red;
  font-size: 20px;
}

/* ❌ Not recommended: easy to miss semicolons */
h2 {
  color: blue
  font-size: 18px /* This will cause an error */
}
</style>
<h1>First Level Heading</h1>
<h2>Second Level Heading</h2>
<span class="demo-blue">Blue text</span>

2. Colons between property names and values

The colon must be an English colon :. There can be spaces between the property name and colon, but it's recommended to maintain a consistent style.

3. Using quotes

Some property values (like font names) that contain spaces need to be wrapped in quotes:

Example

<style>
p {
  font-family: "Microsoft YaHei", "宋体", sans-serif;
}
</style>
<p>This is a paragraph example.</p>

4. Case sensitivity

CSS property names and values are not case-sensitive in most cases, but lowercase is conventionally used. The only exception is that some values (like font names, URL paths) may need to preserve their original case.

Example

<style>
/* ✅ Recommended: consistent lowercase */
p {
  color: red;
}

/* 🔄 Uppercase works too, but not recommended */
P {
  COLOR: RED;
}
</style>
<p>This is a paragraph example.</p>
<p>Example content</p>

Common Syntax Errors

Beginners often make the following mistakes when writing CSS — be careful to avoid them:

❓ FAQ

📖 Summary

• CSS syntax is actually very simple: selectors select elements, and declaration blocks contain properties and values
• Master this basic structure, and you can read and write any CSS rule
• Remember: each declaration ends with a semicolon, property names and values are separated by colons, and comments are wrapped in /* */

📝 Exercises

1. Create an HTML file using a <style> tag to set red text and 28px font size for h1 elements, and blue text and 16px font size for p elements.
2. Add comments in the style code explaining what each style does.
3. Intentionally write one declaration incorrectly (e.g., write colour instead of color), open the page in a browser, and see what the Styles panel in Developer Tools shows.