CSS Syntax

In the last lesson you learned about Adding CSS to HTML. Now let’s look at how one line of CSS is actually built. This is called the CSS syntax.

Syntax just means the rules for how you write the code. It is like grammar in English. Put the words in the right order and the browser understands you. Get it wrong and your style is simply ignored.

🎨 What is CSS Syntax?

CSS syntax is the shape of a CSS rule. A rule is one small block of code that styles something on the page. Every time you style something you write that same shape. So once you learn this one pattern, you can write any style you want.

A full piece of CSS is called a rule. A rule tells the browser two things. Which element to style, and how to style it.

Here is what a single rule looks like.

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

This rule says take every <p> (paragraph) on the page, then make its text blue and the size 18 pixels. That is the whole thing. Now let’s break it into parts so you see what each piece does.

🧩 The Parts of a Rule

Let’s name the pieces. Here is the same rule again with the parts pointed out.

p {              /* p is the selector */
  color: blue;   /* color is a property, blue is its value */
}

Here is what each part means.

• Selector — the part before the { } curly braces. It picks which element you want to style. Here p means all paragraphs. Think of it as the name tag that says “style this one”.
• Declaration block — everything inside the { } curly braces. This is where your style instructions go.
• Property — the thing you want to change. Like color, font-size, or background. It is the what.
• Value — the setting you give that property. Like blue or 18px. It is the how.
• Declaration — one property and one value together, like color: blue;. That is one full instruction.

So a property and a value join with a colon :. Then each declaration ends with a semicolon ;.

🤔 Why the Colon and Semicolon Matter

You might ask why all these tiny symbols are needed. They are not there to annoy you. They tell the browser where one idea ends and the next one begins.

• The colon : separates the property from its value. It is like saying “this property is set to this value”.
• The semicolon ; ends one declaration. It tells the browser “I am done with this instruction, the next one is coming”.

Here is a rule with more than one declaration. Watch how each line ends with a semicolon.

h1 {
  color: white;
  background: black;
  font-size: 32px;
}

This makes every <h1> heading have white text on a black background, sized at 32 pixels. Each instruction sits on its own line and ends with a semicolon. So the browser reads them one by one with no confusion.

🔤 The Syntax at a Glance

Here is a quick table of the parts so you can look back at them any time.

💬 Comments in CSS

Sometimes you want to leave a small note in your code. Maybe to remind yourself why you did something. That note is called a comment. The browser skips comments completely. They are only for humans reading the code.

You write a comment by putting your text between /* and */.

/* This styles the main heading */
h1 {
  color: green; /* brand color */
}

The browser ignores both notes. It just styles the heading green. Comments help a lot when you come back to your code weeks later and forget what a part does.

⚠️ Common Mistakes

These small slips trip up almost every beginner. Once you know them, you will spot them fast.

• Forgetting the semicolon. If you miss the ; at the end of a line, the browser can get confused and skip your style. So always close each declaration.
• Using the wrong braces. CSS uses curly braces { }, not round ( ) or square [ ] ones.
• Missing the colon. Writing color blue; with no colon is wrong. It must be color: blue;.
• Putting a space in the wrong place. font - size is wrong. The property name is font-size, one word joined by a hyphen.

Here is the wrong way and the right way side by side.

/* ❌ Avoid - no colon, no semicolon */
p {
  color blue
}

/* ✅ Good - colon between, semicolon at the end */
p {
  color: blue;
}

✅ Best Practices

A few simple habits will keep your CSS clean and easy to read.

• Put each declaration on its own line. It is much easier to read than cramming them all on one line.
• Always end every declaration with a semicolon. Even the last one. It saves you trouble later when you add more.
• Add a space after the colon. Write color: blue;, not color:blue;. It reads nicer and it is the common style.
• Use comments to explain anything that is not obvious.

🧩 What You’ve Learned

You now know how a CSS rule is built from the ground up. Quick recap.

• ✅ A CSS rule has a selector and a declaration block inside { } braces.
• ✅ A selector picks the element, a property is what you change, and a value is the setting.
• ✅ A colon : joins a property to its value, and a semicolon ; ends each declaration.
• ✅ Comments go between /* and */ and are ignored by the browser.
• ✅ Most CSS errors come from a missing semicolon, a missing colon, or the wrong braces.

🚀 What’s Next?

Now that you can read and write a CSS rule, the next step is learning the many ways to pick elements. That is where selectors get really useful.

CSS Selectors