CSS Syntax

Introduction

In the previous lesson, you learned how CSS works with HTML and how the browser matches CSS rules with elements.

Now it is time to understand how CSS code itself is written.

Just like every programming or styling language, CSS follows a specific structure and set of writing rules.

This structure is called CSS syntax.

A CSS rule normally contains a selector followed by a declaration block. The declaration block contains one or more declarations, and each declaration contains a property and a value.

What is CSS Syntax?

CSS syntax is the set of rules that defines how CSS code must be written.

It determines where selectors, curly braces, properties, colons, values, and semicolons should appear.

selector {
    property: value;
}

The selector identifies the HTML element or elements to style.

The declaration block contains the styling instructions.

h1 {
    color: blue;
}

Why Do We Need CSS Syntax?

The browser needs a predictable structure to understand CSS instructions correctly.

Without syntax rules, the browser would not know where a selector ends, where a declaration begins, or which value belongs to which property.

h1
    color blue

h1 {
    color: blue;
}

Real-World Analogy

Imagine ordering food at a restaurant.

You need to clearly identify the customer and provide the instruction in a format that can be understood.

Customer: Table 5
Food: Pizza
Size: Large

CSS follows a similar structure.

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

Basic CSS Syntax

The basic structure of a CSS rule contains two major parts: a selector and a declaration block.

selector {
    property: value;
}

h1      {      color      :      blue      ;
│              │                 │
│              │                 └── Value
│              │
│              └── Property
│
└── Selector

{ ... }  → Declaration Block

color: blue; → Declaration

<h1>
    Welcome to CSS
</h1>

h1 {
    color: blue;
}

Parts of a CSS Rule

A complete CSS rule is made from several important parts.

p {
    color: gray;
    font-size: 18px;
}

1. Selector

The selector tells the browser which HTML element or elements should receive the styles.

h1 {
    color: purple;
}

Here, h1 is the selector.

It matches every <h1> element in the document.

<h1>
    First Heading
</h1>

<h1>
    Second Heading
</h1>

Because both elements match the h1 selector, both headings receive the purple color.

2. Declaration Block

The declaration block contains the styling instructions for the selected elements.

It begins with an opening curly brace and ends with a closing curly brace.

{
    color: blue;
    font-size: 40px;
}

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

Everything between the curly braces belongs to the declaration block.

h1  {
      │
      ├── color: blue;
      │
      ├── font-size: 40px;
      │
      }
      
      Entire area between { and }
      is the Declaration Block

3. Property

A CSS property identifies the feature or characteristic that you want to change.

color: blue;
font-size: 20px;
background-color: yellow;
text-align: center;

p {
    color: white;
    background-color: green;
    font-size: 20px;
}

4. Value

A value defines the setting that should be assigned to a CSS property.

color: blue;

In this declaration, color is the property and blue is the value.

h2 {
    color: red;
    font-size: 32px;
    text-align: center;
}

5. Colon & Semicolon

The colon and semicolon have different responsibilities inside a CSS declaration.

color: blue;

color    :    blue    ;
  │      │      │     │
  │      │      │     └── Ends Declaration
  │      │      │
  │      │      └── Value
  │      │
  │      └── Separates Property and Value
  │
  └── Property

p {
    color: blue;
    font-size: 18px;
    text-align: center;
}

Example 1: Single Declaration

A CSS rule can contain only one declaration.

<p>
    Learning CSS is interesting.
</p>

p {
    color: blue;
}

Example 2: Multiple Declarations

A declaration block can contain multiple declarations.

<h1>
    Welcome to PrograMinds
</h1>

h1 {
    color: white;
    background-color: purple;
    font-size: 40px;
    text-align: center;
}

Writing Multiple CSS Rules

A stylesheet normally contains many CSS rules.

<h1>
    CSS Course
</h1>

<p>
    Learn CSS step by step.
</p>

<button>
    Start Learning
</button>

h1 {
    color: purple;
}

p {
    color: gray;
    font-size: 18px;
}

button {
    color: white;
    background-color: green;
}

CSS Comments

Comments are notes written inside CSS code for developers.

The browser ignores CSS comments when applying styles.

/* This is a CSS comment */

/* Main page heading */

h1 {
    color: blue;
}

/* Introduction paragraph */

p {
    color: gray;
}

/*
    This section contains
    the styles for the
    main navigation.
*/

Whitespace and Formatting

CSS generally allows flexible whitespace between many parts of a rule.

The following examples can represent the same CSS rule.

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

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

Both can produce the same result, but the first version is much easier for developers to read and maintain.

Valid vs Invalid CSS

CSS must follow the expected syntax for declarations to be understood correctly.

p {
    color: blue;
    font-size 20px;
    background-color: yellow;
}

The font-size declaration is invalid because the colon is missing.

The browser can ignore the invalid declaration while continuing to process valid declarations that it can understand.

How Browser Reads CSS

The browser processes CSS rules in several stages.

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

Browser Rendering Flow

CSS syntax is processed as part of the complete browser rendering process.

CSS Code
   │
   ▼
Parse Syntax
   │
   ▼
Recognize Selectors
   │
   ▼
Recognize Declarations
   │
   ▼
Validate Properties & Values
   │
   ▼
Match HTML Elements
   │
   ▼
Resolve Competing Rules
   │
   ▼
Calculate Final Styles
   │
   ▼
Render Output

Real-World Applications

Correct CSS syntax is used in every website and web application that uses CSS.

Advantages

Learning CSS syntax correctly provides a strong foundation for every advanced CSS topic.

Common Beginner Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

CSS syntax defines the structure used to write styling rules.

A standard CSS rule contains a selector followed by a declaration block.

The selector identifies which HTML elements should receive the styles.

The declaration block is placed inside curly braces and contains one or more declarations.

Each declaration contains a property and a value.

The property identifies what should change, while the value defines the setting that should be used.

A colon separates the property from its value, and a semicolon ends the declaration.

A single CSS rule can contain multiple declarations, and a stylesheet can contain many different rules.

CSS comments use the /* ... */ syntax and are ignored by the browser when styles are applied.

Although CSS allows flexible whitespace, readable formatting and consistent indentation make stylesheets easier to understand and maintain.

When the browser finds invalid CSS, it often ignores the declaration it cannot understand and continues processing the remaining code.

Learning correct CSS syntax gives you the foundation required for every topic that follows.

In the next lesson, you will learn CSS selectors and discover the different ways to target specific HTML elements.