What is CSS? A Beginner's Introduction to Styling the Web

Beginner 10 min read

What you'll learn

✓What CSS is and what role it plays alongside HTML
✓Three ways to attach CSS to a page
✓The anatomy of a CSS rule and how selectors work
✓How the cascade and specificity decide which rule wins
✓Custom properties (CSS variables) and why they matter

Prerequisites

•Comfort with basic HTML — see What is HTML?

If HTML is the skeleton of a web page, CSS is the skin, clothes, and posture. It controls how every element looks — colors, fonts, spacing, layout, and animations. This guide explains what CSS is, how the browser applies it, and how to write your first stylesheet.

No prior CSS experience is required.

What is CSS?

CSS stands for Cascading Style Sheets. Like HTML, it is not a programming language in the traditional sense. It is a declarative language: you describe the result you want, and the browser figures out how to achieve it.

A complete CSS rule looks like this:

h1 {
  color: steelblue;
  font-size: 2rem;
}

That rule says: “find every <h1> element on the page, set its text color to steelblue, and set its font size to 2rem.” You do not write loops, conditionals, or function calls. You write rules, and the browser applies them.

CSS was first proposed in 1994 by Håkon Wium Lie at CERN and standardized by the W3C two years later. The version everyone uses today is called CSS3 in practice, though the language is now modular and shipped in continuous updates rather than as one big version.

How CSS attaches to HTML

There are three ways to add CSS to a page, in increasing order of preference.

Inline styles apply to one element:

<p style="color: red;">This paragraph is red.</p>

Inline styles are quick but quickly become unmaintainable. Avoid them in real projects.

An internal stylesheet lives inside a <style> tag in the document’s <head>:

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

Useful for tiny demos, but the styles cannot be reused on other pages.

An external stylesheet is a separate .css file linked from the HTML:

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

This is what real sites use. One stylesheet can be reused across every page, cached by the browser, and edited without touching the HTML.

Anatomy of a rule

Every CSS rule has the same shape:

selector {
  property: value;
  property: value;
}

For example:

.button {
  background-color: steelblue;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}

The pieces:

Selector (.button) — which elements the rule applies to.
Declaration block (the part in braces) — the styles to apply.
Property (background-color) — what aspect of the element to change.
Value (steelblue) — what to change it to.
Declaration — one property/value pair, ending in a semicolon.

The semicolon after the last declaration is optional but most developers keep it for consistency.

Selectors

Selectors are how you target HTML elements. Five kinds cover almost every case.

Type selector — by tag name:

p {
  line-height: 1.6;
}

Applies to every <p> element on the page.

Class selector — by class attribute, prefixed with a dot:

.warning {
  color: crimson;
}

Applies to any element with class="warning".

ID selector — by id attribute, prefixed with a hash:

#main-nav {
  background: black;
}

Applies to the element with id="main-nav". Each id should be unique per page.

Attribute selector — by any attribute and value:

input[type="email"] {
  border: 1px solid steelblue;
}

Applies only to email inputs.

Pseudo-class selector — by state:

a:hover {
  text-decoration: underline;
}

button:disabled {
  opacity: 0.5;
}

Applies when the element is in a particular state — being hovered, focused, disabled, and so on.

You can combine selectors:

nav a {
  color: white;
}

.card > h2 {
  margin-top: 0;
}

button.primary {
  background: steelblue;
}

nav a — any <a> inside a <nav>.
.card > h2 — an <h2> that is a direct child of .card.
button.primary — a <button> that also has the class primary.

A complete first stylesheet

Put it together with a small page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Hello, CSS</h1>
    </header>
    <main>
      <p class="lead">This paragraph uses a class.</p>
      <p>This paragraph uses only the tag selector.</p>
      <a href="#">A link</a>
    </main>
  </body>
</html>

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 2rem;
  background: #f7f7f7;
  color: #222;
}

h1 {
  color: steelblue;
}

p {
  line-height: 1.6;
}

.lead {
  font-size: 1.25rem;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

Save the two files in the same folder, open index.html in your browser, and the page is styled. This same pattern — one HTML file, one linked stylesheet — powers most of the web.

Try it yourself. Create the two files above. Change the body background to a color you like. Add a .warning class to one of the paragraphs and write a CSS rule that makes warnings red. Save and refresh.

The cascade

The first C in CSS stands for Cascading. When more than one rule could apply to the same element, the browser resolves the conflict using three things, in order:

Importance — declarations marked !important win over normal ones.
Specificity — more specific selectors win over less specific ones.
Source order — when specificity ties, the later rule wins.

A quick example. Given this HTML:

<p class="lead" id="intro">Hello</p>

And these rules:

p { color: gray; }
.lead { color: steelblue; }
#intro { color: crimson; }

The text is crimson. The #intro selector beats .lead, which beats the bare p. ID selectors are more specific than class selectors, which are more specific than tag selectors.

Specificity is a real source of beginner frustration. Two practical rules of thumb:

Prefer classes for almost all styling. They sit at a sensible middle level.
Avoid !important except as a last resort. It is hard to override later.

Inheritance

Some CSS properties — mostly text-related ones like color, font-family, and line-height — are inherited by child elements. If you set them on <body>, every descendant gets the value unless something else overrides it:

body {
  font-family: system-ui, sans-serif;
  color: #222;
}

This is why most stylesheets set fonts and colors on body once and rarely repeat them. Properties related to layout — margin, padding, width, border — are not inherited, which is usually what you want.

Custom properties (CSS variables)

Modern CSS supports variables, called custom properties. They make a stylesheet much easier to maintain.

:root {
  --color-primary: steelblue;
  --color-text: #222;
  --space-md: 1rem;
  --space-lg: 2rem;
}

body {
  color: var(--color-text);
  padding: var(--space-lg);
}

.button {
  background: var(--color-primary);
  padding: var(--space-md) var(--space-lg);
}

--color-primary — a custom property. The double-dash prefix is required.
:root — a pseudo-class targeting the document root, the standard place to define site-wide variables.
var(--color-primary) — read the variable.

Change one line at the top of the file and every place that uses the variable updates. This is how design systems are built in plain CSS, with no framework required.

Try it yourself. Take the stylesheet you wrote earlier and replace every color value with a custom property defined on :root. Then change all your colors at once by editing only the :root block.

How big is CSS?

CSS has hundreds of properties. You do not need to memorize them. A small set covers the vast majority of work:

Color and background: color, background-color, background
Typography: font-family, font-size, font-weight, line-height, text-align
Spacing: margin, padding
Sizing: width, height, max-width
Borders: border, border-radius
Layout: display, flex, grid, gap
Effects: box-shadow, opacity, transition

Master those and you can build almost any page that exists today. The rest you look up as you need it.

Recap

You now know:

CSS is a declarative language for describing how HTML should look
The three ways to attach CSS — inline, internal, external (prefer external)
A rule is a selector plus a declaration block of properties and values
Type, class, ID, attribute, and pseudo-class selectors target elements in different ways
The cascade resolves conflicts by importance, specificity, then source order
Some properties inherit to children; most layout properties do not
Custom properties let you reuse values and update them in one place

Next steps

The next post is the single most important concept in all of CSS — the box model. Every element on the page is a box, and understanding how those boxes are sized, padded, and bordered is the key to predictable layouts.

→ Next: The CSS Box Model Explained for Beginners

Questions or feedback? Email codeloomdevv@gmail.com.