Before writing CSS, it is important to understand its basic syntax.

Every CSS rule consists of:

• Selector
• Declaration
• Rule Set
• Comments

---

What is CSS Syntax?

CSS syntax tells the browser:

Which element to style
        +
What style to apply

Every CSS rule follows this structure:

selector {
    property: value;
}

Example:

h1 {
    color: blue;
}

Breakdown:

h1      → Selector
color   → Property
blue    → Value

---

Selectors

A selector tells CSS which HTML element should be styled.

HTML:

<h1>Hello World</h1>

CSS:

h1 {
    color: blue;
}

Output:

Hello World
(Blue Color)

Here, h1 is the selector because it selects every <h1> element.

Without selectors, CSS would not know where to apply styles.

For example:

p {
    color: gray;
}

Meaning:

Select every <p> element
and make the text gray.

Multiple selectors can be used.

h1 {
    color: blue;
}

p {
    color: gray;
}

---

Common Selectors

Element Selector:

h1 {
    color: red;
}

Targets:

<h1>Title</h1>

Class Selector:

.title {
    color: blue;
}

Targets:

<h1 class="title">
    Welcome
</h1>

ID Selector:

#header {
    color: green;
}

Targets:

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

---

Declarations

A declaration tells the browser which style to apply.

Structure:

property: value;

Example:

color: blue;

Breakdown:

color → Property
blue  → Value

More examples:

font-size: 20px;

background-color: yellow;

width: 300px;

---

Multiple Declarations

A CSS rule can contain multiple declarations.

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

Structure:

Selector
│
└── h1
     ├── color: blue;
     ├── font-size: 40px;
     └── text-align: center;

---

Rule Sets

A complete CSS rule is called a Rule Set.

A rule set contains:

Selector
        +
Declarations

Example:

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

Structure:

Rule Set
│
├── Selector
│     └── h1
│
└── Declarations
      ├── color: blue;
      └── font-size: 40px;

Another example:

p {
    color: gray;
    line-height: 1.5;
}

Everything inside the braces belongs to one rule.

---

Braces

CSS rules are enclosed inside braces.

{
}

Example:

h1 {
    color: blue;
}

Components:

h1      → Selector
{       → Opening Brace
}       → Closing Brace

Everything inside the braces is called the declaration block.

---

Semicolons

Each declaration should end with a semicolon.

Good:

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

Bad:

h1 {
    color: blue
    font-size: 30px
}

Browsers may still interpret the code, but always end declarations with a semicolon.

---

Comments

Comments are notes for developers.

Browsers completely ignore comments.

Single comment:

/* This is a comment */

Example:

/* Heading Styles */

h1 {
    color: blue;
}

Multi-line comment:

/*
Main Theme Colors
Used Across Website
*/

Comments are commonly used for:

• Documentation
• Organizing code
• Temporarily disabling styles

Example:

/* Typography */

h1 {

}

p {

}

/* Buttons */

button {

}

To disable code:

/*
h1 {
    color: red;
}
*/

---

Complete CSS Example

HTML:

<h1 class="title">
    Frontend Development
</h1>

<p>
    Learn HTML and CSS.
</p>

CSS:

/* Main Heading */

.title {

    color: navy;
    font-size: 40px;

}

/* Paragraph */

p {

    color: gray;
    font-size: 18px;

}

---

Rule Breakdown

Rule 1:

.title {

    color: navy;
    font-size: 40px;

}

Selector:

.title

Declarations:

color: navy;
font-size: 40px;

Rule 2:

p {

    color: gray;
    font-size: 18px;

}

Selector:

p

Declarations:

color: gray;
font-size: 18px;

---

CSS Rule Structure

Selector
   │
   ▼

h1 {

    color: blue;
    font-size: 30px;

}

   ▲
   │
Declarations

---

Common Mistakes

Missing semicolon:

Bad:

h1 {
    color: blue
}

Good:

h1 {
    color: blue;
}

---

Missing braces:

Bad:

h1
    color: blue;

Good:

h1 {
    color: blue;
}

---

Incorrect comment:

Bad:

// Heading Style

CSS does not support // comments.

Good:

/* Heading Style */

---

Key Takeaway

Every CSS rule follows the same structure.

selector {

    property: value;

}

Example:

h1 {

    color: blue;
    font-size: 40px;

}

Remember:

Selector
    ↓
Chooses Element

Declaration
    ↓
Defines Style

Rule Set
    ↓
Selector + Declarations

Comment
    ↓
Developer Notes

Understanding CSS syntax is the foundation for everything else in CSS, including selectors, layouts, Flexbox, Grid, animations, and responsive design.