CSS Syntax Explained

Introduction

CSS has its own way of writing instructions.

These instructions tell the browser which HTML elements to style and what visual changes to apply.

For example:

1p {2  color: blue;3}

This small piece of CSS tells the browser to make paragraph text blue.

To understand CSS properly, you need to understand the main parts of CSS syntax:

1selectors2properties3values4declarations5rulesets

These are the building blocks of CSS.

Once you understand them, reading and writing CSS becomes much easier.

What Is CSS Syntax?

Syntax means the rules for how code is written.

CSS syntax is the way CSS code must be structured so the browser can understand it.

A basic CSS rule looks like this:

1selector {2  property: value;3}

For example:

1h1 {2  color: navy;3}

This tells the browser:

1find all h1 elements2set their text colour to navy

The selector chooses what to style.

The property says what part of the style should change.

The value says what it should change to.

A Simple CSS Example

Here is a simple HTML paragraph:

1<p>This is a paragraph.</p>

Here is CSS that styles it:

1p {2  color: darkslategray;3  font-size: 18px;4}

The selector is:

1p

The declarations are:

1color: darkslategray;2font-size: 18px;

The browser applies those styles to all <p> elements.

The paragraph text becomes dark slate gray and 18 pixels in size.

What Is a Selector?

A selector tells CSS which HTML element or elements to style.

For example:

1p {2  color: blue;3}

The selector is:

1p

This selects all paragraph elements.

Another example:

1h1 {2  font-size: 2.5rem;3}

The selector is:

1h1

This selects all <h1> elements.

Selectors are how CSS connects to HTML.

Element Selectors

An element selector targets HTML elements by their tag name.

For example:

1h1 {2  color: navy;3}

This selects all <h1> elements.

Another example:

1p {2  line-height: 1.6;3}

This selects all <p> elements.

Another example:

1button {2  padding: 12px 18px;3}

This selects all <button> elements.

Element selectors are simple and useful when you want to style every element of a certain type.

Class Selectors

A class selector targets elements with a specific class attribute.

HTML:

1<p class=”note”>This is a note.</p>

CSS:

1.note {2  background-color: #f5f5f5;3}

The selector is:

1.note

The dot means CSS is selecting a class.

This CSS targets any element with:

1class=”note”

Classes can be reused on many elements:

1<p class=”note”>First note.</p>2<p class=”note”>Second note.</p>3<p class=”note”>Third note.</p>

All three paragraphs can be styled with the same .note rule.

ID Selectors

An ID selector targets an element with a specific id attribute.

HTML:

1<section id=”intro”>2  <h2>Introduction</h2>3</section>

CSS:

1#intro {2  padding: 32px;3}

The selector is:

1#intro

The hash symbol means CSS is selecting an ID.

This targets the element with:

1id=”intro”

An ID should be unique on the page.

Use IDs for one specific element.

Use classes for reusable styles.

Selector Symbols

CSS uses different symbols for different selector types.

An element selector does not need a special symbol:

1p {2  color: blue;3}

A class selector uses a dot:

1.note {2  color: blue;3}

An ID selector uses a hash symbol:

1#intro {2  color: blue;3}

A simple rule is:

1p = element selector2.note = class selector3#intro = ID selector

These three selector types are among the most common in CSS.

What Is a Declaration Block?

A declaration block is the part of a CSS rule inside the curly braces.

For example:

1p {2  color: blue;3  font-size: 18px;4}

The declaration block is:

1{2  color: blue;3  font-size: 18px;4}

The curly braces group the style instructions together.

Everything inside the braces applies to the selector.

In this case, the selector is p, so the declarations apply to paragraph elements.

What Is a Declaration?

A declaration is one style instruction inside a CSS rule.

For example:

1color: blue;

This is a declaration.

It has two main parts:

1property2value

The property is:

1color

The value is:

1blue

Together, they tell the browser to set the text colour to blue.

Properties

A property tells CSS what aspect of the element you want to change.

For example:

1color

changes text colour.

1font-size

changes text size.

1background-color

changes background colour.

1padding

changes space inside an element.

1margin

changes space outside an element.

In a declaration, the property comes before the colon:

1font-size: 18px;

Here, font-size is the property.

Values

A value tells CSS what setting to use for a property.

For example:

1color: blue;

The value is:

1blue

Another example:

1font-size: 18px;

The value is:

118px

Another example:

1background-color: #f5f7fb;

The value is:

1#f5f7fb

Different properties accept different kinds of values.

For example, color accepts colour values.

font-size accepts size values.

display accepts layout values such as block, inline, flex, or grid.

Property and Value Together

A property and value work together as a declaration.

Example:

1line-height: 1.6;

The property is:

1line-height

The value is:

11.6

The full declaration tells the browser to set the line height.

Another example:

1border-radius: 8px;

The property is border-radius.

The value is 8px.

This rounds the corners of an element.

The Colon

In CSS declarations, a colon separates the property from the value.

Correct:

1color: blue;

Incorrect:

1color blue;

The browser needs the colon to understand the declaration.

The structure is:

1property: value;

If the colon is missing, the declaration will not work correctly.

The Semicolon

A semicolon usually ends each declaration.

Correct:

1p {2  color: blue;3  font-size: 18px;4}

The semicolon after color: blue separates it from the next declaration.

If there is only one declaration, some browsers may still understand it without a semicolon:

1p {2  color: blue3}

However, it is better to include semicolons consistently:

1p {2  color: blue;3}

This helps avoid mistakes when you add more declarations later.

Curly Braces

Curly braces contain the declarations for a selector.

Example:

1h1 {2  color: navy;3}

The opening brace is:

1{

The closing brace is:

1}

If you forget a closing brace, the browser may misunderstand the CSS that follows.

Incorrect:

1h1 {2  color: navy;3 4p {5  color: gray;6}

Correct:

1h1 {2  color: navy;3}4 5p {6  color: gray;7}

Each ruleset should have a clear opening and closing brace.

What Is a Ruleset?

A ruleset is a complete CSS rule.

It includes:

1a selector2a declaration block3one or more declarations

Example:

1h1 {2  color: navy;3  font-size: 2.5rem;4}

The selector is:

1h1

The declaration block is:

1{2  color: navy;3  font-size: 2.5rem;4}

The declarations are:

1color: navy;2font-size: 2.5rem;

Together, this is one ruleset.

Many people casually call this a CSS rule.

Multiple Declarations in One Ruleset

A ruleset can contain several declarations.

Example:

1.card {2  background-color: white;3  border: 1px solid #dddddd;4  border-radius: 8px;5  padding: 24px;6}

This ruleset styles elements with the class card.

It sets:

1background colour2border3rounded corners4padding

All of the declarations apply to the same selector.

This is useful because one selector can control several visual details.

Multiple Selectors in One Ruleset

You can apply the same declarations to more than one selector.

For example:

1h1,2h2,3h3 {4  font-family: Arial, sans-serif;5}

This applies the same font family to <h1>, <h2>, and <h3> elements.

The selectors are separated by commas.

Another example:

1button,2input,3textarea {4  font: inherit;5}

This applies the same declaration to buttons, inputs, and textareas.

Using multiple selectors can reduce repetition.

Whitespace in CSS

CSS is generally flexible with whitespace.

This works:

1p{color:blue;}

But this is easier to read:

1p {2  color: blue;3}

Both can be understood by the browser.

However, readable formatting is better for humans.

Good formatting makes CSS easier to scan, edit, and debug.

A common style is:

1selector {2  property: value;3  property: value;4}

CSS Comments

CSS comments let you add notes in your stylesheet.

A CSS comment starts with:

1/*

and ends with:

1*/

Example:

1/* Main page heading */2h1 {3  color: navy;4}

The browser ignores comments.

Comments are useful for explaining sections of CSS.

Do not put private information in comments because CSS files can usually be viewed by users.

A Full CSS Example

Here is a simple CSS file:

1/* Basic page styles */2body {3  font-family: Arial, sans-serif;4  line-height: 1.6;5  background-color: #f5f7fb;6  color: #222222;7}8 9/* Main heading */10h1 {11  color: navy;12  font-size: 2.5rem;13}14 15/* Reusable card component */16.card {17  background-color: white;18  border: 1px solid #dddddd;19  border-radius: 8px;20  padding: 24px;21}

This file includes:

1comments2element selectors3a class selector4properties5values6declarations7rulesets

It shows how CSS syntax works in a real stylesheet.

How CSS Connects to HTML

CSS selectors target HTML elements.

For example, this HTML:

1<h1>Welcome</h1>2 3<p>This is a paragraph.</p>4 5<article class=”card”>6  <h2>Featured Lesson</h2>7  <p>Learn how CSS syntax works.</p>8</article>

can be styled with this CSS:

1h1 {2  color: navy;3}4 5p {6  color: #333333;7}8 9.card {10  border: 1px solid #dddddd;11  padding: 24px;12}

The h1 selector targets the heading.

The p selector targets paragraphs.

The .card selector targets the article with class="card".

This is how CSS finds the elements it should style.

A Complete HTML and CSS Example

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>CSS Syntax Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <main class=”container”>11    <h1>CSS Syntax Example</h1>12 13    <p class=”intro”>14      This page is styled using selectors, properties, values, declarations, and rulesets.15    </p>16 17    <article class=”card”>18      <h2>What Is a Ruleset?</h2>19      <p>A ruleset is a complete CSS rule with a selector and declaration block.</p>20    </article>21  </main>22 23</body>24</html>

CSS:

1body {2  font-family: Arial, sans-serif;3  line-height: 1.6;4}5 6.container {7  width: 90%;8  max-width: 900px;9  margin: 0 auto;10}11 12.intro {13  font-size: 1.2rem;14}15 16.card {17  padding: 24px;18  border: 1px solid #cccccc;19  border-radius: 8px;20}

The HTML gives the page structure.

The CSS uses selectors to find elements and declarations to style them.

Reading CSS from Left to Right

When reading CSS, start with the selector.

Example:

1.card {2  padding: 24px;3  border: 1px solid #cccccc;4}

Read it like this:

1Find elements with class=”card”.2Add 24px of padding.3Add a 1px solid border.

Another example:

1h1 {2  color: navy;3}

Read it like this:

1Find all h1 elements.2Make their text colour navy.

This simple reading method helps CSS feel less abstract.

Common Mistake: Forgetting the Selector

Incorrect:

1{2  color: blue;3}

Correct:

1p {2  color: blue;3}

The browser needs a selector to know what element should receive the style.

The selector tells CSS what to target.

Common Mistake: Forgetting Curly Braces

Incorrect:

1p2  color: blue;

Correct:

1p {2  color: blue;3}

The declarations must go inside curly braces.

The braces group the declarations with the selector.

Common Mistake: Missing the Colon

Incorrect:

1p {2  color blue;3}

Correct:

1p {2  color: blue;3}

The colon separates the property from the value.

Without it, the browser cannot correctly read the declaration.

Common Mistake: Missing the Semicolon

Less reliable:

1p {2  color: blue3  font-size: 18px;4}

Better:

1p {2  color: blue;3  font-size: 18px;4}

The semicolon separates declarations.

If the semicolon is missing between declarations, the browser may ignore part of the CSS.

Common Mistake: Misspelling Properties

Incorrect:

1p {2  colour: blue;3}

Correct:

1p {2  color: blue;3}

CSS property names use American English spelling for color.

If a property is misspelled, the browser usually ignores that declaration.

Another example:

1p {2  font-szie: 18px;3}

Correct:

1p {2  font-size: 18px;3}

Small spelling mistakes can stop styles from working.

Common Mistake: Using the Wrong Selector Symbol

Incorrect:

1note {2  color: blue;3}

if the HTML is:

1<p class=”note”>This is a note.</p>

Correct:

1.note {2  color: blue;3}

The dot is required for class selectors.

Another example:

1intro {2  padding: 24px;3}

if the HTML is:

1<section id=”intro”>

Correct:

1#intro {2  padding: 24px;3}

The hash symbol is required for ID selectors.

Common Mistake: Forgetting That Class Names Use Spaces

This HTML has two classes:

1<p class=”message warning”>Check your details.</p>

The classes are:

1message2warning

You can target them separately:

1.message {2  padding: 12px;3}4 5.warning {6  font-weight: bold;7}

This is different from:

1<p class=”message-warning”>Check your details.</p>

That has one class:

1message-warning

The matching selector is:

1.message-warning {2  font-weight: bold;3}

Spaces separate class names.

Hyphens are part of a class name.

Common Mistake: Writing HTML Syntax in CSS

Incorrect CSS:

1<p> {2  color: blue;3}

Correct CSS:

1p {2  color: blue;3}

In CSS selectors, do not write angle brackets around element names.

Use:

1h1

not:

1<h1>

HTML uses angle brackets.

CSS selectors usually do not.

Common Mistake: Writing CSS Inside an HTML File Without <style>

Incorrect:

1<head>2  p {3    color: blue;4  }5</head>

Correct:

1<head>2  <style>3    p {4      color: blue;5    }6  </style>7</head>

If you write CSS inside an HTML document, it must go inside a <style> element.

For most real projects, it is usually better to put CSS in a separate .css file and link it with:

1<link rel=”stylesheet” href=”styles.css”>

Best Practices

Start each ruleset with a clear selector.

Put declarations inside curly braces.

Write declarations as property: value;.

Use a colon between the property and value.

Use semicolons between declarations.

Use element selectors for general element styling.

Use class selectors for reusable styles.

Use ID selectors for unique elements when needed.

Use readable formatting and indentation.

Use comments to organise larger CSS files.

Check spelling carefully.

Remember that class selectors use a dot.

Remember that ID selectors use a hash symbol.

Keep HTML syntax and CSS syntax separate.

Summary

CSS syntax is the way CSS code is written.

A basic CSS ruleset looks like this:

1selector {2  property: value;3}

For example:

1p {2  color: blue;3}

The selector chooses what to style.

The property says what style feature should change.

The value says what setting to use.

The declaration is:

1color: blue;

The full ruleset is:

1p {2  color: blue;3}

Selectors, properties, values, declarations, and rulesets are the foundation of CSS.

Once you understand these parts, you can read and write CSS more confidently.