CSS Basics

The foundation of everything CSS — syntax, selectors, specificity, the cascade, and inheritance. Master these concepts and everything else falls into place.

SyntaxSelectorsSpecificityCascadeInheritance

What is CSS?

CSS (Cascading Style Sheets) is the language used to control the visual presentation of HTML documents. While HTML defines the structure and content of a page, CSS controls how that content looks — colors, fonts, spacing, layout, animations, and more.

CSS was first proposed by Håkon Wium Lie in 1994 and became a W3C recommendation in 1996 (CSS1). Today we use CSS3, which is split into independent modules that evolve separately — Flexbox, Grid, Animations, Custom Properties, and many more.

How CSS Works

The browser loads HTML, parses it into a DOM tree, fetches CSS, combines the DOM with CSS rules (creating the CSSOM), and renders the result to the screen. CSS rules select HTML elements and apply declarations (property-value pairs) to them.

Live Example — CSS in Action

This paragraph has default styling.

This paragraph is styled with CSS — color, font-weight, background, padding, border.

CSS Syntax

A CSS rule (or rule set) consists of a selector and a declaration block. The declaration block contains one or more declarations, each with a property and a value, separated by a colon and ending with a semicolon.

CSS

selector {
  property: value;          /* This is a declaration */
  another-property: value; /* Another declaration */
}

/* Real example */
h1 {
  color: #333;
  font-size: 2rem;
  margin-bottom: 16px;
}

At-Rules

At-rules are special CSS statements that start with @. They control conditional logic, imports, and features.

CSS

@import url('other.css');       /* Import another stylesheet */
@media (max-width: 768px) { }   /* Conditional styles */
@keyframes fade { }              /* Animation definition */
@font-face { }                    /* Custom font */
@layer base { }                   /* Cascade layer */

Adding CSS to HTML

There are three ways to apply CSS to an HTML document, each with different use cases.

1. External Stylesheet (Recommended)

A separate .css file linked in the HTML <head>. Best for production — cacheable, reusable across pages, clean separation of concerns.

HTML

<head>
  <link rel="stylesheet" href="styles.css">
</head>

2. Internal (Embedded) Stylesheet

CSS inside a <style> tag in the <head>. Useful for single-page demos or critical CSS.

HTML

<head>
  <style>
    h1 { color: blue; }
    p  { line-height: 1.6; }
  </style>
</head>

3. Inline Styles

CSS directly on an element via the style attribute. Highest specificity, but hard to maintain. Use sparingly — mainly for dynamic styles set via JavaScript.

HTML

<p style="color: red; font-weight: bold;">Inline styled text</p>

Method	Specificity	Reusable	Cacheable	Best For
External	Normal	Yes	Yes	Production websites
Internal	Normal	No	No	Single pages, critical CSS
Inline	Highest	No	No	JS-driven dynamic styles

Selectors

Selectors tell CSS which HTML elements to style. The selector is the part before the opening curly brace.

Basic Selectors

CSS

/* Universal — selects everything */
* { box-sizing: border-box; }

/* Type (element) — selects all elements of that type */
p { color: #333; }
h1 { font-size: 2rem; }

/* Class — selects elements with that class (reusable) */
.card { padding: 16px; }
.btn-primary { background: blue; }

/* ID — selects ONE element with that ID (unique) */
#header { height: 60px; }

/* Grouping — same styles to multiple selectors */
h1, h2, h3 { font-family: Georgia, serif; }

/* Descendant — p inside .card (any depth) */
.card p { color: gray; }

/* Child — direct children only */
.nav > li { display: inline-block; }

/* Multiple classes on same element */
.btn.primary { background: blue; }

Live Example — Different Selectors

Type selector: all <p> elements (red)

Class selector: .by-class (green, bold)

ID selector: #by-id (blue, bold, underline)

Child selector (div > span): This span is italic because it's a direct child

Specificity

When multiple CSS rules target the same element, specificity determines which rule wins. Think of it as a scoring system — the rule with the highest score applies.

Specificity Scoring

Selector Type	Weight	Example
Inline styles	1-0-0-0	`style="color:red"`
ID selectors	0-1-0-0	`#header`
Class, attribute, pseudo-class	0-0-1-0	`.card`, `[type="text"]`, `:hover`
Type, pseudo-element	0-0-0-1	`div`, `p`, `::before`
Universal selector *	0-0-0-0	`*`

Calculating Specificity

CSS

p                    /* 0-0-0-1 */
.card                /* 0-0-1-0 */
.card p              /* 0-0-1-1 */
#main .card p        /* 0-1-1-1 */
#main .card p.intro  /* 0-1-2-1 */
div#main .card.featured p.intro:hover  /* 0-1-3-2 */

Live Example — Specificity Battle

Element selector p — specificity 0-0-0-1 (red)

Class .winner beats element — specificity 0-0-1-0 (green)

ID #champion beats class — specificity 0-1-0-0 (blue)

!important

!important overrides all specificity rules. It should be treated as a last resort — it makes CSS extremely hard to maintain and debug.

CSS

p { color: red !important; }  /* Wins over everything except another !important with higher specificity */

⚠ Specificity Wars

If you find yourself using !important to fight specificity, you have an architecture problem. Refactor your selectors to be flatter and less specific instead of escalating with !important.

The Cascade

The "C" in CSS. When multiple rules apply to the same element, the cascade algorithm determines which wins. It checks these factors in order:

Origin & Importance — Where the style comes from:
- User agent styles (browser defaults) — lowest
- Author styles (your CSS) — normal
- Author !important — high
- User !important — highest
Specificity — Higher specificity wins (see above)
Source Order — When specificity is equal, the last rule declared wins

CSS

/* Source order — last rule wins when specificity is equal */
p { color: red; }
p { color: blue; }  /* This wins — declared last */

Live Example — Cascade Source Order

Both rules have equal specificity — the last-declared green wins over red.

Inheritance

Some CSS properties are inherited by child elements from their parent. This is how a font-family on body applies to every text element on the page.

Inherited Properties (Common)

color, font-family, font-size, font-weight, line-height, letter-spacing, text-align, text-transform, visibility, cursor, list-style

Non-Inherited Properties (Common)

margin, padding, border, width, height, background, display, position, overflow, box-shadow, transform

Controlling Inheritance

CSS

.child {
  color: inherit;   /* Force inherit from parent */
  border: inherit;  /* Force non-inherited property to inherit */
  color: initial;   /* Reset to CSS spec default */
  color: unset;     /* inherit if normally inherited, initial if not */
  all: unset;       /* Reset ALL properties */
  color: revert;    /* Roll back to browser default stylesheet */
}

Live Example — Inheritance

Parent div: color=#a78bfa, font=Georgia

This paragraph inherits purple color and Georgia font from the parent.

But the border is NOT inherited — only the parent has the border.

CSS Comments

Comments are ignored by the browser. Use them to explain complex logic, organize sections, or temporarily disable code.

CSS

/* Single line comment */

/*
  Multi-line comment
  explaining complex logic
*/

/* ===== SECTION HEADER ===== */

.btn {
  color: white;
  /* background: red; */  /* temporarily disabled */
}

⚠ Common Mistakes

• Forgetting the semicolon after a declaration — the next property gets silently ignored.
• Using IDs for styling — they create high specificity that's hard to override. Prefer classes.
• Over-using !important — it creates specificity wars and makes CSS unmaintainable.
• Not understanding inheritance — manually setting font-family on every element instead of setting it once on body.
• Confusing class (reusable, .name) with id (unique, #name).

★ Pro Tips

• Use browser DevTools (F12 → Elements → Styles) to see which rules apply, which are overridden, and why.
• Keep selectors flat and low-specificity: prefer .card-title over div.card > h2.title.
• Set font-family, color, and line-height on body and let inheritance do the work.
• Use * { box-sizing: border-box; } as your first CSS rule — always.

Browser Support

Everything on this page is supported in all browsers since IE9+. CSS3 features like variables and grid are covered in later chapters — all supported in modern browsers.

Next Box Model