CSS Syntax

What Is CSS Syntax?

CSS syntax is the structure used to write CSS rules. A CSS rule tells the browser which HTML element should be styled and what styles should be applied.

selector {
  property: value;
}

Every CSS rule contains a selector and one or more declarations. The browser reads these declarations and applies the styles to matching HTML elements.

CSS Syntax Cheatsheet

Basic CSS Rule Structure

Every CSS rule follows the same basic structure:

selector {
  property: value;
}

Example

h1 {
  color: blue;
}

This rule changes all h1 elements to blue.

Selectors, Properties, and Values

CSS syntax consists of three primary building blocks.

p {
  color: #333333;
}

CSS Declarations

A declaration consists of a property and value separated by a colon.

color: blue;

Multiple declarations can exist inside a declaration block.

h1 {
  color: blue;
  font-size: 2rem;
  text-align: center;
}

Declaration Block

Declarations are grouped together inside curly braces.

h1 {
  color: blue;
  font-size: 2rem;
  margin-bottom: 1rem;
}

Everything between the opening and closing braces forms the declaration block.

Multiple CSS Rules

CSS files typically contain many rule sets.

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: blue;
}

p {
  line-height: 1.6;
}

Each rule targets different HTML elements and applies specific styles.

CSS Comments

Comments help explain code and organize large stylesheets.

/* Main navigation styles */
.navbar {
  background-color: #212529;
}

Browsers ignore comments when rendering pages.

Recommended CSS Formatting Style

Consistent formatting makes CSS easier to read and maintain.

.card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.1);
}

Formatting Guidelines

• Place opening braces on the same line as selectors.
• Use two spaces or consistent indentation.
• Place one declaration per line.
• End declarations with semicolons.
• Use lowercase property names.
• Group related properties together.

Class Selector Syntax

Classes are the most commonly used selectors in modern CSS.

.button {
  background-color: #0d6efd;
  color: white;
}

HTML

<button class="button">
  Save Changes
</button>

ID Selector Syntax

ID selectors target one unique element.

#header {
  background-color: #212529;
}

HTML

<header id="header">
  Website Header
</header>

Grouping Selectors

Multiple selectors can share the same styles.

h1,
h2,
h3 {
  font-family: Arial, sans-serif;
  line-height: 1.2;
}

Grouping selectors reduces duplicate code and improves maintainability.

Common CSS Syntax Errors

How Browsers Read CSS Syntax

1. Browser downloads CSS files.
2. Browser parses selectors.
3. Browser reads declarations.
4. Matching HTML elements receive styles.
5. Final styles are rendered on screen.

If syntax errors exist, browsers may ignore some or all of the affected rules.

CSS Syntax Best Practices

• Use meaningful class names.
• Keep selectors simple.
• Always use semicolons.
• Indent consistently.
• Group related declarations together.
• Use comments for large sections.
• Prefer classes over IDs for reusable styling.
• Write mobile-first CSS.
• Remove unused rules.
• Validate CSS before deployment.

Key Takeaways

• CSS syntax follows a selector-property-value structure.
• Selectors determine which elements receive styles.
• Properties define what changes.
• Values define how the style changes.
• Declarations are grouped inside curly braces.
• Clean syntax improves maintainability and debugging.
• Understanding CSS syntax is essential before learning selectors, box model, Flexbox, Grid, and responsive design.