CSS Syntax Explained: Rules, Selectors and Properties

The Short Answer

Here is the smallest complete CSS rule you can write:

p { color: red; }

Reading it left to right:

• p — the selector. It targets every paragraph.
• { — the start of the declaration block.
• color — the property.
• : — the separator between property and value.
• red — the value.
• ; — the terminator of the declaration.
• } — the end of the declaration block.

That is the complete grammar. Everything else in CSS is a variation on this pattern: different selectors, more declarations, longer values, and special at-rules that begin with @.

Anatomy of a CSS Rule

The rule below contains every part you need to recognize. Take it one section at a time.

The four parts

Selector

The pattern that decides which elements the rule applies to. .card matches any element whose class attribute contains card.

Declaration block

Everything between the opening and closing curly braces. It contains one or more declarations, each ending with a semicolon.

Property

The name of the aspect being changed, such as color, font-size, padding, or display. Property names come from the CSS specification and are not invented by the author.

Value

What the property is being set to. Values can be keywords (red, block), numbers with units (16px, 1.5rem), colors (#0891b2, rgb(8, 145, 178)), functions (calc(), var()), or more complex lists.

Multiple declarations

A block can hold as many declarations as you need. Each one must end with a semicolon:

.card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

Whitespace and line breaks are entirely optional. CSS ignores them. The declarations above could be written on a single line and produce exactly the same result. Formatting is for humans, not the browser.

A Token-by-Token Legend

Every character in a CSS rule has a role. This is the full vocabulary of the syntax:

There is no punctuation in CSS that does not appear in this list. Every stylesheet — no matter how long — uses only these tokens, arranged into rules.

Selectors: Choosing What to Style

The selector is the first part of a rule, and it determines which elements the rule applies to. CSS has a wide range of selector forms, and they can be combined in almost any way.

The fundamental selector types

Combinators: expressing relationships

Combinators link two selectors into a relationship. They do not match elements in isolation; they match elements based on where they sit in the document tree.

Grouping selectors

A comma lets you share one declaration block across multiple selectors:

h1,
h2,
h3 {
    color: #0f172a;
    line-height: 1.25;
}

This is equivalent to writing three separate rules with identical declarations. If one selector in a comma-separated list is invalid, the entire rule is discarded by the browser — an important detail to remember.

Chaining selectors

Placing selectors next to each other without a space means "an element that matches all of these at once":

button.primary { background: #0891b2; }
input[type="text"].is-invalid { border-color: #e11d48; }

button.primary means "a <button> element that also has the class primary." It matches only elements that are both.

Properties: What You Can Change

A property is the name of a style aspect. CSS defines hundreds of them, but they fall into a handful of categories.

Property names are almost always written in kebab-case — lowercase words separated by hyphens. This is not a stylistic choice; it is the naming convention the specification uses.

Values: What You Can Set Them To

A value is the second half of a declaration. CSS values come in several shapes, and knowing them makes the specification readable.

Keywords

Predefined words with specific meanings. Examples include red, block, flex, absolute, bold, transparent, inherit, and initial.

Numbers with units

Many properties expect a number followed by a unit. Writing the number alone is invalid for most of them.

Note that 0 is the one number that can be written without a unit, because zero pixels, zero ems, and zero percent are all the same length.

Colors

Colors can be written in several formats, all valid:

.example {
    color: red;                          /* keyword */
    color: #0891b2;                      /* hex */
    color: #08f;                         /* short hex */
    color: rgb(8 145 178);               /* rgb */
    color: rgba(8, 145, 178, 0.8);       /* rgba with alpha */
    color: hsl(191 82% 36%);             /* hsl */
    color: oklch(70% 0.15 220);          /* modern color space */
}

Functions

Some values are produced by functions. These are evaluated by the browser and their result is used as the value:

.example {
    width: calc(100% - 40px);
    color: var(--color-primary);
    background: linear-gradient(135deg, #06b6d4, #7c3aed);
    transform: rotate(45deg);
    background-image: url("photo.jpg");
}

Lists and multiple values

Some properties accept a list of values separated by spaces or commas. The order matters and each position has a defined meaning:

.example {
    font-family: "Inter", system-ui, sans-serif;    /* fallback list */
    margin: 16px 24px;                             /* top/bottom, left/right */
    box-shadow: 0 4px 16px rgba(0,0,0,.1);         /* x y blur color */
    transition: color 0.2s ease, opacity 0.3s ease; /* comma-separated list */
}

Global keywords

Four values work on every property and can be used to reset or inherit styling:

• inherit — take the parent's computed value.
• initial — reset to the property's default value.
• unset — inherit if the property is inherited, otherwise initial.
• revert — reset to the value from the previous cascade origin.

CSS Units at a Glance

Units are one of the most common sources of confusion for beginners. This table covers the ones you will use most.

At-Rules: CSS Beyond Plain Rules

Not everything in CSS is a selector followed by a declaration block. Statements that begin with @ are called at-rules, and they control how CSS is imported, evaluated, or organized.

@media

Applies rules only when the environment matches a condition — most commonly viewport size:

@media (min-width: 768px) {
    .card {
        padding: 32px;
    }
}

@import

Loads another stylesheet. It must appear at the very top of the file, before any other rules:

@import url("base.css");
@import url("layout.css") screen and (min-width: 768px);

@supports

Applies rules only if the browser supports a given feature:

@supports (display: grid) {
    .layout { display: grid; }
}

@font-face and @keyframes

These at-rules define resources rather than apply styles. @font-face declares a custom font. @keyframes defines an animation:

@font-face {
    font-family: "Inter";
    src: url("inter.woff2") format("woff2");
}

@keyframes pulse {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}

@layer

Declares a cascade layer — a way to control the order in which groups of styles compete:

@layer reset, base, components, utilities;

@layer base {
    body { margin: 0; }
}

Custom Properties: A Syntax of Their Own

Custom properties — commonly called CSS variables — have their own syntax, and it is worth knowing well because it differs from ordinary properties.

Declaration

A custom property is declared with a name that begins with two dashes:

:root {
    --color-primary: #0891b2;
    --space-md: 1rem;
    --radius: 12px;
}

The name is author-defined — you can call it whatever you want — but it must start with -- and it is case-sensitive. --color and --Color are different properties.

Usage

To read a custom property, use the var() function:

.btn {
    background: var(--color-primary);
    padding: var(--space-md) calc(var(--space-md) * 1.5);
    border-radius: var(--radius);
}

Fallback values

var() accepts an optional second argument, used when the first is not defined:

.btn {
    color: var(--color-text, #0f172a);
}

If --color-text is not defined anywhere, the fallback #0f172a is used instead.

Comments

CSS supports only one kind of comment:

/* This is a comment. */
.card {
    color: #0891b2; /* inline comment */
}

Comments begin with /* and end with */. They can span multiple lines. The browser ignores everything between the markers.

CSS does not support // line comments. Writing one causes the browser to treat the entire line as an invalid declaration and discard it — often including the rule that follows if it was on the same line.

Shorthand vs Longhand

Many CSS properties have both a shorthand form and several longhand forms. Understanding the difference prevents a whole class of bugs.

margin: 16px 24px;
font: italic 600 1rem/1.5 sans-serif;
background: #fff url("bg.jpg") no-repeat;

margin-top: 16px;
margin-right: 24px;
font-style: italic;
font-weight: 600;
font-size: 1rem;
line-height: 1.5;

The trap of shorthand

When you use a shorthand property, any longhand value you omit is reset to its initial value. This is the single biggest source of confusion around shorthand:

.btn {
    border: 1px solid #0891b2;
    border-radius: 10px;
}

.btn--outline {
    border: 2px dashed; /* This resets border-radius? No — */
                        /* It resets border-width, style, color only. */
}

The border shorthand only resets border-width, border-style, and border-color. It does not touch border-radius, because border-radius is a separate property. But properties like font and background do reset many related longhands, and that can silently wipe out values you set earlier.

Common Syntax Errors

These are the mistakes that break CSS most often. Every one of them is silent — the browser discards the broken declaration without warning.

1. Missing semicolon

Without the semicolon after red, the browser merges the two declarations into one invalid statement and discards both.

2. Missing colon

3. Missing units

4. Mismatched braces

A missing closing brace causes the browser to swallow every rule that follows it inside the unterminated block.

5. Invalid property name

6. Invalid selector

When a selector list is invalid, the entire rule is dropped — not just the broken selector. This is why a single typo in a comma-separated list can silently disable all the styles that were supposed to apply.

7. Quoting errors

A Complete Stylesheet

Putting all the syntax together, here is a small but complete stylesheet that uses selectors, properties, values, units, custom properties, at-rules, and comments:

/* ---- Design tokens ---- */
:root {
    --color-primary: #0891b2;
    --color-accent: #7c3aed;
    --color-text: #0f172a;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --radius: 12px;
    --transition: 0.2s ease;
}

/* ---- Base ---- */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background: #f5f7fb;
}

/* ---- Card ---- */
.card {
    background: #ffffff;
    border-radius: var(--radius);
    padding: calc(var(--space-md) * 1.5);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.card > .card__title {
    margin: 0 0 var(--space-sm);
    color: var(--color-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

/* ---- Responsive ---- */
@media (min-width: 768px) {
    .card {
        padding: calc(var(--space-md) * 2);
    }
}

Every part of that stylesheet uses only the syntax covered in this guide: selectors (type, class, universal, descendant, child, pseudo-class), declaration blocks, standard properties, custom properties with var(), functions like calc(), an at-rule, and comments.

Best Practices

Key Takeaways

• A CSS rule is a selector plus a declaration block wrapped in curly braces.
• A declaration is a property, a colon, a value, and a semicolon.
• Selectors include type, class, ID, attribute, pseudo-class, and pseudo-element forms.
• Combinators (space, >, +, ~) express relationships between elements.
• Comma-separated selectors share one declaration block.
• Property names come from the specification and use kebab-case.
• Values can be keywords, numbers with units, colors, or functions.
• Units matter — most properties require them, except zero.
• At-rules begin with @ and control imports, media queries, and more.
• Custom properties begin with -- and are read with var().
• CSS comments use /* */ only — never //.
• Shorthand properties reset their omitted longhands to initial values.
• A missing semicolon or brace can silently disable entire rules.
• DevTools is the fastest way to see which rules applied and which were rejected.

What to Learn Next

Now that CSS syntax is clear, the next step is to understand how those rules compete and combine. Start with How CSS Works: A Beginner's Guide and CSS Selectors Explained.

From there, explore CSS Specificity and the Cascade, The CSS Box Model, and CSS Units Explained. When you are ready to build layouts, read CSS Flexbox Guide and CSS Grid Guide, then move on to Responsive Web Design.

If you want the bigger picture, read HTML vs CSS and What Is CSS? A Beginner's Guide.

Practice Challenge

The fastest way to internalize CSS syntax is to write a rule, then deliberately break it in every way described above and watch what the browser does. This exercise takes about fifteen minutes.

1. Create index.html and styles.css in the same folder.
2. In the HTML, add a heading, a paragraph, a link, and a button. Give each element a class.
3. Link the stylesheet with <link rel="stylesheet" href="styles.css">.
4. Write a rule that styles the heading with a color and a font size in rem.
5. Write a rule with a comma-separated selector that styles both the paragraph and the link.
6. Write a rule that uses a descendant combinator to target the button inside a container.
7. Add a :hover pseudo-class rule for the button.
8. Define two custom properties on :root and reference them in your rules.
9. Now deliberately break the file in six ways: remove a semicolon, remove a colon, omit a unit, remove a closing brace, misspell a property, and add a trailing comma to a selector list.
10. Open DevTools and inspect the affected elements. Note which declarations were discarded and why.
11. Fix each mistake one at a time, refreshing after each fix.
12. Finally, add a media query that changes the heading size at min-width: 768px and resize the window to see it switch.

When you finish, you will have seen every part of CSS syntax — and every way it can fail silently — in your own code. Once that becomes familiar, reading any stylesheet becomes straightforward, and debugging stops being guesswork.