CSS Syntax Explained: Selectors, Properties & Rules

CSS Syntax: A Complete and Easy-to-Understand Guide

CSS (Cascading Style Sheets) syntax is the foundation of how styles are written and applied to web pages. If HTML is the structure of a website, CSS syntax is the language that tells the browser how that structure should look—colors, layouts, spacing, fonts, animations, and much more.

This guide explains CSS syntax in full detail, from basic rules to advanced patterns, written in simple language with practical examples. Whether you are a beginner or brushing up your fundamentals, this article covers everything you need to know about CSS syntax.

What Is CSS Syntax?

CSS syntax is the set of rules and structure used to write CSS code.
It tells the browser:

• Which elements to style
• What properties to change
• Which values to apply

Without correct syntax, browsers cannot understand or apply styles properly.

Basic Structure of CSS Syntax

At its core, CSS syntax is made of rules.
Each rule consists of two main parts:

1. Selector
2. Declaration Block

General CSS Rule Format

selector {
  property: value;
}

Let’s break this down step by step.

CSS Selector

The selector defines which HTML element(s) the CSS rule will apply to.

Example

p {
  color: blue;
}

Here:

• p is the selector
• It targets all paragraph (<p>) elements

Types of CSS Selectors (Syntax Overview)

Selectors are the entry point of CSS syntax.

Declaration Block

The declaration block is written inside curly braces {} and contains one or more declarations.

{
  property: value;
}

CSS Declaration

A declaration is a single styling instruction.

Declaration Structure

property: value;

Example

color: red;

• color → property
• red → value
• ; → semicolon (mandatory)

CSS Property

A property specifies what aspect of the element you want to style.

Common CSS Properties

• color
• background-color
• font-size
• margin
• padding
• border
• width
• height
• display

Each property has specific allowed values.

CSS Value

A value defines how the property should look or behave.

Types of Values in CSS Syntax

Semicolon in CSS Syntax

Each declaration must end with a semicolon (;).

Correct

h1 {
  color: green;
  font-size: 32px;
}

Incorrect

h1 {
  color: green
  font-size: 32px
}

Missing semicolons can break CSS parsing.

Curly Braces { }

Curly braces group all declarations for a selector.

• Opening brace { starts the declaration block
• Closing brace } ends it

Without braces, CSS rules are invalid.

Whitespace and Formatting in CSS

CSS ignores extra spaces, tabs, and line breaks, but clean formatting improves readability.

These Are Equivalent

p{color:red;}

p {
  color: red;
}

Best practice is readable formatting.

Multiple Declarations in One Rule

You can define multiple properties inside a single selector.

.card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}

Each declaration is independent.

Grouping Selectors

CSS syntax allows multiple selectors to share the same rules.

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

This reduces repetition and improves maintainability.

Comments in CSS Syntax

Comments are used to explain code and are ignored by browsers.

CSS Comment Syntax

/* This is a CSS comment */

Example

/* Main heading style */
h1 {
  color: navy;
}

CSS does not support single-line comments like //.

CSS Syntax for Colors

CSS supports multiple color formats.

color: red;
color: #ff5733;
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);
color: hsl(10, 80%, 60%);

All follow the same property: value; syntax.

CSS Units in Syntax

Units define measurement values.

Absolute Units

• px
• cm
• mm

Relative Units

• %
• em
• rem
• vw
• vh

Example:

font-size: 1.2rem;
margin: 10px;
width: 80%;

CSS Shorthand Syntax

Shorthand allows multiple properties in one line.

Example: Margin

margin: 10px 20px;

Equivalent to:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

Shorthand syntax is compact but order-sensitive.

CSS Syntax for Classes and IDs

Class Selector Syntax

.box {
  border: 1px solid black;
}

HTML usage:

<div class="box"></div>

ID Selector Syntax

#header {
  background-color: gray;
}

HTML usage:

<div id="header"></div>

CSS Attribute Selector Syntax

Targets elements based on attributes.

input[type="email"] {
  border-color: blue;
}

Powerful for forms and dynamic styling.

CSS Pseudo-Classes Syntax

Used for states of elements.

a:hover {
  color: red;
}

Common pseudo-classes:

• :hover
• :active
• :focus
• :first-child

CSS Pseudo-Elements Syntax

Used to style parts of elements.

p::first-letter {
  font-size: 200%;
}

Common pseudo-elements:

• ::before
• ::after
• ::first-line

CSS Syntax for Multiple Rules

A CSS file is simply many rules written together.

body {
  font-family: Arial;
}

h1 {
  color: black;
}

p {
  line-height: 1.6;
}

Browsers read CSS top to bottom.

Case Sensitivity in CSS Syntax

• CSS properties and values are case-insensitive
• Class and ID selectors are case-sensitive in HTML context

Best practice: use lowercase everywhere

Common CSS Syntax Errors

Even small syntax mistakes can stop styles from working.

CSS Syntax Best Practices

• Always end declarations with ;
• Use consistent indentation
• Write readable selectors
• Avoid unnecessary repetition
• Comment complex sections
• Validate CSS using tools

Why CSS Syntax Matters

Correct CSS syntax ensures:

• Styles load correctly
• Websites look consistent
• Code is easy to maintain
• Browsers render pages efficiently

Mastering CSS syntax is the first real step toward professional web design.

Final Thoughts

CSS syntax may look simple at first, but it is extremely powerful. Every layout, animation, responsive design, and visual effect on the web depends on these core rules:

selector → property → value

Once you fully understand CSS syntax, learning advanced CSS becomes much easier and faster.

SEO FAQ Section

What is CSS syntax?

CSS syntax is the structure used to write CSS rules. It includes selectors, properties, values, curly braces, and semicolons that tell browsers how to style HTML elements.

What are the main parts of CSS syntax?

The main parts of CSS syntax are the selector, declaration block, property, value, and semicolon.

Why is CSS syntax important?

Correct CSS syntax ensures styles work properly, prevents errors, and helps browsers display web pages accurately.

What happens if CSS syntax is wrong?

If CSS syntax is incorrect, browsers may ignore the rule completely or stop reading styles after the error.

Is CSS syntax case-sensitive?

CSS properties and values are not case-sensitive, but class and ID names are case-sensitive when used in HTML.