CSS Syntax – Complete Beginner's Guide with Examples (2026-27)

✅ CSS Syntax Structure

Every CSS rule has the same structure. Understanding this structure is the foundation of all CSS writing:

✅ Real Example:-

h1 {
  color: blue;
  font-size: 32px;
  text-align: center;
}

✅ What is a CSS Selector?

A CSS selector is the part of a CSS rule that identifies which HTML element(s) to style. The selector is written before the opening curly brace {.

✅ A selector can target one element, multiple elements, elements with a specific class, elements with a specific ID, or elements in a specific state (like hover).

✅ Examples of different selectors:-

/* Element selector — targets all <p> tags */
p { color: #333; }

/* Class selector — targets elements with class="highlight" */
.highlight { background: yellow; }

/* ID selector — targets the element with id="header" */
#header { font-size: 28px; }

/* Universal selector — targets ALL elements */
* { box-sizing: border-box; }

/* Descendant selector — <a> inside <nav> */
nav a { color: #0EA5E9; }

✅ Types of CSS Selectors

✅ CSS Property and Value

A CSS property is the style characteristic you want to change. A CSS value is what you set that property to. They are always paired with a colon between them.

✅ Format: property: value;

color: red;               /* text color */
font-size: 16px;          /* text size */
background-color: yellow; /* background color */
margin: 20px;             /* space outside element */
padding: 10px 20px;       /* space inside element */
border: 2px solid black;  /* border around element */
display: flex;            /* layout mode */
width: 100%;              /* element width */

✅ CSS Declaration Block

The declaration block is everything inside the curly braces { }. It contains one or more declarations, where each declaration is a property: value; pair.

✅ Structure:-

selector {               /* ← Opening brace starts declaration block */
  property: value;       /* ← Declaration 1 */
  property: value;       /* ← Declaration 2 */
  property: value;       /* ← Declaration 3 */
}                        /* ← Closing brace ends declaration block */

✅ Real Example:-

p {
  color: #333;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 16px 0;
  font-family: Arial, sans-serif;
}

✅ Multiple Properties in One Rule

You can add as many property: value; pairs as needed inside one declaration block. Each pair is on its own line (recommended) and ends with a semicolon.

✅ Example – Styling a button completely:-

.btn {
  background-color: #0EA5E9;  /* background */
  color: #ffffff;              /* text color */
  font-size: 15px;             /* text size */
  font-weight: bold;           /* bold text */
  padding: 12px 28px;          /* inner spacing */
  border: none;                /* no border */
  border-radius: 8px;          /* rounded corners */
  cursor: pointer;             /* pointer cursor on hover */
  text-transform: uppercase;   /* ALL CAPS text */
  letter-spacing: 1px;         /* spacing between letters */
  transition: background 0.2s; /* smooth hover transition */
}

✅ Multiple Selectors (Grouping Selectors)

If several different HTML elements need the same CSS styles, you can group them into one rule by separating selectors with commas. This avoids repeating the same code.

✅ Without grouping (repetitive):-

/* BAD: repeated same declarations */
h1 { color: #1E3A5F; font-family: Arial, sans-serif; }
h2 { color: #1E3A5F; font-family: Arial, sans-serif; }
h3 { color: #1E3A5F; font-family: Arial, sans-serif; }
h4 { color: #1E3A5F; font-family: Arial, sans-serif; }

✅ With grouping (clean and DRY):-

/* GOOD: group with commas */
h1, h2, h3, h4 {
  color: #1E3A5F;
  font-family: Arial, sans-serif;
}

✅ More grouping examples:-

/* Group elements AND classes */
p, .description, article {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}

/* Group form elements */
input, textarea, select {
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 4px;
  width: 100%;
}

✅ CSS Comments

CSS comments let you add notes in your code. They are completely ignored by the browser — they never affect styling. Comments help document your CSS for yourself and other developers.

✅ CSS Comment Syntax:-

/* This is a single-line CSS comment */

/* ══════════════════════════════
   HEADER STYLES
   ══════════════════════════════ */

h1 {
  color: blue;        /* heading color */
  font-size: 32px;    /* heading size  */
  /* text-align: center; */ /* commented-out, won't apply */
}

/*
  This is a
  multi-line
  CSS comment
*/

/* TODO: Add mobile responsive styles here */

✅ CSS Whitespace and Formatting

CSS ignores extra whitespace (spaces, tabs, newlines) between rules and declarations. You can format your CSS however you like — browsers only care about the syntax, not the spacing.

✅ All of these are identical to the browser:-

/* Style 1 — expanded (recommended for development) */
h1 {
  color: blue;
  font-size: 32px;
}

/* Style 2 — compact */
h1 { color: blue; font-size: 32px; }

/* Style 3 — minified (for production deployment) */
h1{color:blue;font-size:32px;}

✅ The CSS Cascade – Which Rule Wins?

When multiple CSS rules apply to the same element, the browser uses the cascade to determine which rule wins. The cascade considers three things — in this order:

1. Importance — !important declarations override everything else.

2. Specificity — More specific selectors win over less specific ones.

3. Source Order — When specificity is equal, the rule that appears last in the CSS wins.

✅ Source order example:-

p { color: red; }    /* First rule */
p { color: blue; }   /* Second rule — WINS because it comes last */
/* Result: paragraph text is blue */

✅ CSS Specificity – How It's Calculated

Specificity is a score that determines which CSS rule takes priority when multiple rules target the same element. Think of it as a 4-digit number (0,0,0,0):

✅ Specificity calculation examples:-

p              /* 0,0,0,1 = specificity 1   — element */
.text          /* 0,0,1,0 = specificity 10  — class   */
#main          /* 0,1,0,0 = specificity 100 — ID      */
p.text         /* 0,0,1,1 = specificity 11  — element + class */
#main p.text   /* 0,1,1,1 = specificity 111 — ID + element + class */

✅ The !important Rule

Adding !important after a CSS value gives that declaration the highest possible priority — overriding all other rules regardless of specificity or source order.

✅ Syntax:-

p {
  color: red !important; /* this wins over EVERYTHING */
}

#main p {
  color: blue; /* loses to !important even with higher specificity */
}

✅ ✏️ Live Interactive CSS Code Editor

Edit the HTML and CSS below and see the result instantly in the live preview. Try the preset examples — or write your own CSS from scratch!

✅ Common CSS Syntax Mistakes to Avoid