CSS Syntax Explained: Selectors, Properties and Values

CSS syntax is simple: a selector chooses elements, and declarations of properties and values say how they should look. Learn to read and write CSS rules correctly.

The anatomy of a CSS rule

Every piece of CSS is made of rules. A rule has two main parts: a selector and a declaration block.

selector      declaration block
   |       _________|__________
   |      |                    |
   h1     {  color : navy ;  }
             |       |    |
          property value  semicolon

   p {
     color: #333;          <- declaration 1
     font-size: 18px;      <- declaration 2
   }

• The selector (h1, p) chooses which HTML elements to style.
• The curly braces { } hold the declarations.
• Each declaration is one instruction, made of a property and a value.
• The property is what you want to change, like color or font-size.
• The value is the setting, like navy or 18px.
• A colon : separates the property from the value.
• A semicolon ; ends each declaration.

A real-life comparison: a selector is like saying "all the doors in the house", and the declarations are "paint them red, and add a gold handle".

Declarations and semicolons

You can put many declarations in one rule. Each one goes on its own line, which makes the code easy to read.

.button {
  background-color: #1e88e5;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: bold;
}

<a class="button" href="/signup">Sign up free</a>

This styles the link as a blue button with white bold text, space inside, and rounded corners. The semicolon after the last declaration is optional, but always add it. If you later add a new line below it, you won't forget the semicolon and break the rule.

CSS comments

A comment is a note for humans. The browser ignores it. CSS comments start with /* and end with */, and they can cover one line or many lines.

/* Main colors for the site header */
header {
  background-color: #222;
  color: #fff;
}

/*
  Temporarily turned off:
  footer { display: none; }
*/

Use comments to explain sections of your stylesheet, or to "switch off" a rule while you test something. Note that // comments, used in JavaScript, do not work in CSS.

Common CSS syntax mistakes

When CSS doesn't work, it's usually a small typo. The browser does not show an error message; it simply skips the broken part. Check for these:

• Missing semicolon: color: red font-size: 20px; breaks both declarations.
• Missing closing brace: forgetting } can break every rule after it.
• Colon replaced by equals: color = red; is wrong; use color: red;.
• Spelling mistakes: colour, font-colour or backgroud-color are not real properties.
• Space inside a value with a unit: 20 px is wrong; write 20px.
• Wrong selector: writing button when you meant the class .button.

Common mistake: Writing text-color: blue;. There is no text-color property. The text color property is simply color.

How to inspect CSS with browser DevTools

Every modern browser has developer tools (DevTools) built in. They are like an X-ray for web pages, and they are the best way to find CSS problems.

1. Open your page in Chrome, Firefox, Edge or Safari.
2. Right-click the element you want to check and choose Inspect. You can also press F12 (or Cmd+Option+I on a Mac).
3. The Elements panel shows your HTML. The Styles panel next to it shows every CSS rule that applies to the selected element.
4. Rules that lost the cascade are shown with a line through them. A yellow warning icon means a property or value is invalid.
5. Click any value to change it live. The page updates right away, which is perfect for testing.

Tip: Changes you make in DevTools are temporary. They disappear when you refresh. When you like a change, copy it into your .css file.

Practice exercise

This CSS has four mistakes. Find and fix them, then test it on a page with a <h2> and a <p>.

h2 {
  color = darkred;
  font-size: 28 px
}

p
  text-color: #444;
}

Hint: look for a wrong symbol, a space in a value, a missing semicolon, a missing brace, and one property that does not exist. Use DevTools to confirm that every declaration works.

Key takeaways

• A CSS rule has a selector and a declaration block in curly braces.
• Each declaration is property: value; with a colon and a semicolon.
• Comments use /* ... */, never //.
• Broken CSS fails silently, so check for typos first.
• Use DevTools (right-click, Inspect) to see and test the styles on any element.