CSS Syntax – Selectors, Properties, Values & Rules Explained

The CSS Rule – The Basic Unit of CSS

Everything in CSS is built from rules. A rule has two parts:

A selector — which element(s) to target
A declaration block — what to do with them (wrapped in curly braces { })

CSS – Rule structure

selector {
  property: value;
  property: value;
}

A real example:

CSS

h1 {
  color: #1572B6;
  font-size: 2rem;
  margin-bottom: 16px;
}

h1 is the selector — targets all <h1> elements
{ } is the declaration block
color, font-size, margin-bottom are properties
#1572B6, 2rem, 16px are values
Each property: value pair is a declaration and ends with a semicolon ;

⚠️

The semicolon rule

Every declaration must end with a semicolon ;. If you forget it, the browser ignores that declaration and the next one. The last declaration before the closing brace technically does not need a semicolon, but always include it — it prevents bugs when you add more declarations later.

CSS Selectors – Targeting the Right Elements

Selectors are patterns that tell CSS which HTML elements to style. There are five main types:

1. Element Selector (Type Selector)

Targets all instances of an HTML tag.

CSS

/* All <p> elements */
p {
  color: #333;
  line-height: 1.6;
}

/* All <h2> elements */
h2 {
  font-size: 1.5rem;
  border-bottom: 2px solid #1572B6;
}

2. Class Selector

Targets elements with a specific class attribute. Starts with a dot .

HTML + CSS

<p class="highlight">This text is highlighted.</p>
<p>This paragraph is not highlighted.</p>
<span class="highlight">Span also highlighted — classes are reusable.</span>

CSS

.highlight {
  background-color: #fff3cd;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: bold;
}

Classes are the most commonly used selector in real-world CSS. Elements can have multiple classes: class="highlight bold large".

3. ID Selector

Targets a single element with a unique id attribute. Starts with a hash #. IDs must be unique per page.

HTML + CSS

<header id="site-header">...</header>

CSS

#site-header {
  background-color: #1572B6;
  color: white;
  padding: 16px 24px;
}

ID selectors have very high specificity — they override class and element selectors. Modern CSS best practices favor classes over IDs for styling (reserve IDs for JavaScript and anchor links).

4. Universal Selector

Targets every element on the page. Written as an asterisk *.

CSS

/* CSS reset — remove default browser spacing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

The box-sizing: border-box universal rule is one of the most common CSS "reset" techniques used in every professional project.

5. Attribute Selector

Targets elements with a specific attribute or attribute value.

CSS

/* All <input> elements with type="text" */
input[type="text"] {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
}

/* All <a> elements with an href starting with "https" */
a[href^="https"] {
  color: green;
}

/* All images with an alt attribute */
img[alt] {
  border: 2px solid transparent;
}

Grouping Selectors

Apply the same styles to multiple selectors by separating them with commas:

CSS

/* Instead of repeating yourself: */
h1 { margin-bottom: 16px; }
h2 { margin-bottom: 16px; }
h3 { margin-bottom: 16px; }

/* Do this: */
h1, h2, h3 {
  margin-bottom: 16px;
  font-family: 'Georgia', serif;
  color: #111;
}

Descendant & Combinator Selectors

Target elements based on their relationship to other elements:

CSS – Combinators

/* Descendant — any <a> inside a <nav> (no matter how deep) */
nav a {
  text-decoration: none;
  color: white;
}

/* Child — only direct <li> children of <ul> */
ul > li {
  list-style: square;
}

/* Adjacent sibling — <p> immediately after <h2> */
h2 + p {
  font-size: 1.1rem;
  color: #555;
}

/* General sibling — all <p> siblings after <h2> */
h2 ~ p {
  margin-top: 8px;
}

CSS Values – Colors, Sizes, and More

Every CSS property accepts specific types of values. Here are the most important:

Color Values

CSS – Ways to write colors

/* Named colors (147 available) */
color: red;
color: navy;
color: coral;

/* Hex codes — most common */
color: #ff0000;   /* red */
color: #1572B6;   /* CSS blue */
color: #fff;      /* white (shorthand for #ffffff) */

/* RGB */
color: rgb(21, 114, 182);

/* RGBA — with transparency (0 = invisible, 1 = solid) */
color: rgba(21, 114, 182, 0.5);

/* HSL — hue (0-360°), saturation (%), lightness (%) */
color: hsl(207, 79%, 40%);

/* Modern: oklch — best for accessible color systems */
color: oklch(55% 0.18 240);

Length & Size Units

CSS – Common length units

/* Absolute units */
width: 200px;    /* pixels — most common for borders, shadows */
width: 2cm;      /* centimetres — useful for print */

/* Relative to font size */
font-size: 1rem;   /* 1rem = root font size (usually 16px) */
font-size: 1.5em;  /* 1.5em = 1.5× the parent's font-size */

/* Relative to viewport */
width: 100vw;      /* 100% of viewport width */
height: 100vh;     /* 100% of viewport height */
font-size: 4vw;    /* scales with screen width */

/* Percentage — relative to parent */
width: 50%;        /* half the parent's width */
padding: 5%;       /* 5% of parent's width */

💡

rem vs em — which to use?

Use rem for font sizes and most spacing — it stays consistent regardless of nesting depth. Use em when you deliberately want something to scale relative to the local font size (like padding on a button that should grow with its text). Use px for borders, shadows, and small fixed measurements.

CSS Comments

CSS comments use /* */ syntax. They are completely ignored by the browser:

CSS – Comments

/* ================================
   Typography
   ================================ */

h1 {
  font-size: 2rem;    /* 32px at default browser settings */
  color: #111;
}

/* TODO: update color to match new brand palette */
.btn {
  background-color: #1572B6;
}

Comments can span multiple lines. There is no single-line comment syntax in CSS (unlike // in JavaScript).

CSS Shorthand Properties

Many CSS properties have shorthand versions that let you set multiple related properties in one declaration:

CSS – Shorthand vs longhand

/* Longhand (verbose) */
margin-top: 16px;
margin-right: 8px;
margin-bottom: 16px;
margin-left: 8px;

/* Shorthand: top | right | bottom | left (clockwise) */
margin: 16px 8px 16px 8px;

/* Even shorter: top/bottom | left/right */
margin: 16px 8px;

/* Even shorter: all four equal */
margin: 16px;

/* Font shorthand */
/* font: style weight size/line-height family */
font: italic bold 1.2rem/1.6 Georgia, serif;

/* Background shorthand */
background: url('hero.jpg') center/cover no-repeat #1572B6;

/* Border shorthand: width style color */
border: 2px solid #1572B6;

📋 Summary

A CSS rule = selector + declaration block ({ }). A declaration = property: value;
Main selectors: element (h1), class (.name), ID (#name), universal (*), attribute ([attr])
Group selectors with commas. Combine with descendant (space), child (>), adjacent sibling (+), general sibling (~)
Colors: named, hex (#RRGGBB), rgb(), rgba(), hsl()
Units: px (fixed), rem/em (font-relative), % (parent-relative), vw/vh (viewport-relative)
Comments: /* text */ — ignored by the browser
Shorthand properties let you combine multiple declarations in one line

FAQ

What happens if I forget a semicolon in CSS? +

The browser silently ignores the malformed declaration and the next one. There is no error message in the CSS itself (unlike JavaScript). If your CSS stops working mysteriously, check for missing semicolons. You can also use the browser DevTools (F12 → Styles panel) where invalid declarations are shown with a strikethrough.

Should I use classes or IDs for CSS styling? +

Classes for almost everything. IDs are unique per page and have very high specificity, which makes them hard to override when you need to. Classes are reusable, composable (an element can have multiple classes), and have manageable specificity. Modern CSS architecture (BEM, utility-first) uses classes exclusively. Reserve IDs for JavaScript targets and anchor links.

What is the difference between px, em, and rem? +

px is an absolute pixel unit — always the same size regardless of context. em is relative to the font size of the parent element — if the parent font size is 16px, then 1.5em = 24px. rem is relative to the root font size (the <html> element, usually 16px) — it doesn't compound with nesting like em does. Use rem for consistent, accessible sizing; use em when you want local scaling; use px for small fixed values like borders.

What is the difference between margin and padding? +

margin is the space outside the element's border — it separates elements from each other. padding is the space inside the element's border — it separates content from the border. A simple way to remember: margin = outside (neighbors), padding = inside (breathing room). Background color and background images appear in the padding area but not in the margin area.

What does box-sizing: border-box do? +

By default (box-sizing: content-box), when you set width: 200px, that is the width of the content only — padding and border are added on top, making the total element wider than 200px. With box-sizing: border-box, the 200px includes the padding and border — the total element stays 200px. This is much more intuitive for layout, which is why virtually every modern stylesheet starts with * { box-sizing: border-box; }.