CSS Syntax — How to Write Code Correctly Without Mistakes

In the previous lesson we learned what CSS is and why we need it. Now it is time to write your first real CSS code and understand every piece carefully. This lesson is the foundation of everything you will learn later — because every CSS property in the world follows the same general structure.

What Does a Full CSS Rule Look Like?

Here is the general structure of any CSS rule — read it calmly:

selector {
    property: value;
    property: value;
}

And a real example:

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

That is it. Only three components control all CSS.

Explain Each Part — Step by Step

The Three Core Components — In Detail

1. Selector

The selector tells CSS which elements will be affected by the style. It can be an HTML tag, a class name, or an ID.

/* Style all p elements on the page */
p {
    color: gray;
}

/* Style all h2 elements */
h2 {
    font-size: 24px;
}

2. Property

A property defines what you want to change in an element. CSS has hundreds of properties — but only about twenty are used most often.

p {
    color: red;          /* text color */
    font-size: 18px;     /* font size */
    font-weight: bold;   /* font weight */
    text-align: center;  /* text alignment */
    background-color: yellow; /* background color */
}

3. Value

The value defines how the change should look. Each property accepts specific values — for example color accepts a color name or color code.

h1 {
    color: blue;          /* color name */
    color: #2563eb;       /* HEX code */
    color: rgb(37,99,235); /* RGB value */
}

Golden Rules for Writing CSS

Before you write any CSS, remember these four rules:

1. Curly braces are required: every block starts with { and ends with }
2. Colon for separation: always write property: value — the colon separates them
3. Semicolons are required: add ; after each property without exception
4. One line per property: not required, but it makes code clearer and easier to maintain

/* ✅ Correct and professional */
p {
    color: red;
    font-size: 18px;
    text-align: right;
}

/* ⚠️ Works but hard to read */
p { color: red; font-size: 18px; text-align: right; }

/* ❌ Wrong — missing semicolon */
p {
    color: red
    font-size: 18px;
}

Is CSS Case-Sensitive?

CSS usually does not care about case in property names: COLOR works like color. But professional style is to write everything in lowercase. Stick to that habit from the start.

Full Practical Example — Style a Simple Page

Here is a CSS file that styles a simple HTML page:

/* ===========================
   General page styling
   =========================== */

body {
    background-color: #f8fafc;
    font-family: Arial, sans-serif;
    color: #1e293b;
}

/* ===========================
   Headings
   =========================== */

h1 {
    color: #2563eb;
    font-size: 36px;
    text-align: center;
}

h2 {
    color: #0f172a;
    font-size: 24px;
}

/* ===========================
   Paragraphs
   =========================== */

p {
    font-size: 18px;
    line-height: 1.8;
    color: #475569;
}

The page transforms from plain text to a clear visual identity — thanks to these simple rules.

Frequently Asked Questions — FAQ

Do I need a semicolon after the last property?

Technically, the last property does not require a ; because CSS will not expect another property. But professional practice is to always add it — if you add a new property later and forget the previous semicolon, errors appear.

Is CSS case-sensitive?

In most cases, no. COLOR: RED works like color: red. But some values like file names and paths can be case-sensitive depending on the operating system. Always write in lowercase to avoid issues.

Can I write multiple CSS rules on one line?

Yes, the browser understands them regardless of line breaks. But writing each property on its own line is the professional standard because it makes the code easier to read and edit.

What is the difference between CSS and inline style?

Inline style means writing CSS directly on the tag: <h1 style="color:blue">. CSS in a separate file or in a <style> block is the right approach for real projects because it separates design from content.