CSS Syntax

A CSS rule is made up of two main parts: a selector and a declaration block. Together they tell the browser which HTML elements to style and how to style them.

---

The CSS Rule Structure

selector {
    property: value;
    property: value;
}

Part	Example	Description
Selector	h1	Points to the HTML element(s) to style
Declaration Block	{ color: blue; }	Contains one or more declarations inside curly braces
Property	color	The CSS attribute you want to change
Value	blue	The value assigned to the property
Declaration	color: blue;	A property + value pair, separated by a colon and ending with a semicolon

---

Example

This rule makes all <p> elements display with red text and center alignment:

p {
    color: red;
    text-align: center;
}

---

Multiple Declarations

You can write multiple declarations inside one rule block. Each declaration must end with a semicolon ;:

h2 {
    color: #2e7d52;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

---

Multiple Selectors

You can apply the same styles to multiple selectors by separating them with a comma:

h1, h2, h3 {
    color: darkgreen;
    font-family: sans-serif;
}

This applies the rule to <h1>, <h2>, and <h3> all at once.

---

CSS is Case-Insensitive

CSS property names and most values are not case-sensitive. However, it is standard practice to write them in lowercase:

/* both are valid, but lowercase is recommended */
P { COLOR: RED; }
p { color: red; }

---

CSS Comments

Comments in CSS start with /* and end with */. They are ignored by the browser and are useful for explaining your code:

/* This rule styles all paragraphs */
p {
    color: #333;
    line-height: 1.8;
}

/* TODO: add font-size later */

---

Whitespace & Formatting

CSS ignores extra whitespace, tabs, and line breaks. These two rules are identical:

/* Expanded (readable) */
p {
    color: red;
    font-size: 16px;
}

/* Minified (same result) */
p{color:red;font-size:16px;}

Always use the expanded format while writing — it is much easier to read and maintain.

---

Common Mistakes to Avoid

---

Try It: Spot the Bug

This rule has a typo that silently breaks it — compare the broken and fixed versions:

/* Broken: missing semicolon after the first declaration */
.card {
    padding: 16px
    background-color: #f1f8f5;
}

/* Fixed */
.card {
    padding: 16px;
    background-color: #f1f8f5;
}

In the broken version, the browser reads padding: 16px background-color: #f1f8f5 as one invalid value and drops the entire declaration — so neither property applies, not just the one missing the semicolon.

---

Frequently Asked Questions