TH The Sass Way
CSS Fundamentals

What Is CSS? A Beginner's Guide to Styling the Web

The Sass Way · Updated 2026-07-19 · 7 min read
What Is CSS? A Beginner's Guide to Styling the Web
tldrCSS (Cascading Style Sheets) is the language that controls how a web page looks. HTML defines a page's content and structure, while CSS decides its presentation: colors, fonts, spacing, sizing, and layout. It works by pairing selectors, which choose elements, with declarations that style them, and runs natively in every browser.
Contents

What Is CSS? The Short Answer

CSS (Cascading Style Sheets) is the language that controls how a web page looks. HTML defines the content and structure of a page (headings, paragraphs, images, links), and CSS decides how that content is presented: colors, fonts, spacing, sizing, and layout. Where HTML says "this is a heading," CSS says "make that heading dark blue, 32 pixels, and centered."

Every styled website you visit relies on CSS. It runs natively in every browser, requires no plugins or build tools to get started, and works alongside HTML and JavaScript as one of the three core technologies of the web.

The word cascading is the key idea: when several style rules target the same element, CSS follows a defined set of priority rules to decide which one wins. That system is what makes CSS both powerful and, occasionally, confusing.

What Does CSS Stand For?

CSS stands for Cascading Style Sheets. Breaking that down:

CSS was first proposed by Håkon Wium Lie in 1994 and became an official W3C standard in 1996. Today it is maintained as a set of modular specifications by the W3C's CSS Working Group, with new features shipping in browsers regularly.

What Is CSS Used For?

CSS handles everything about how a page presents itself. In practice, developers use it for:

Without CSS, every website would look like an unstyled document: black text, blue links, Times New Roman, stacked top to bottom. CSS is what turns that raw content into a designed experience.

How CSS Works: Rules, Selectors, and Declarations

A CSS rule has two parts: a selector that picks which elements to style, and a declaration block of property-value pairs that describe how to style them.

h1 {
  color: navy;
  font-size: 2rem;
  text-align: center;
}

Reading that rule:

You can target elements in many ways. The most common selectors:

Selector Example Targets
Type p All <p> elements
Class .card Elements with class="card"
ID #header The element with id="header"
Descendant nav a <a> elements inside a <nav>
Pseudo-class a:hover Links while hovered
Attribute input[type="email"] Email inputs

Classes are the workhorse of everyday CSS because they are reusable and keep specificity low. IDs are more specific and harder to override, so most style guides reserve them for JavaScript hooks or unique anchors rather than styling.

The Three Ways to Add CSS

There are three places CSS can live, and they behave differently.

A separate .css file linked from the HTML <head>. One file styles every page, and the browser caches it.

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

2. Internal (embedded) styles

CSS placed in a <style> block inside the HTML document. Useful for a single page or a quick test.

<style>
  body { background: #f4f4f4; }
</style>

3. Inline styles

A style attribute directly on an element. Convenient but hard to maintain and highly specific, so it should be rare.

<p style="color: red;">Warning</p>

Best practice: use external stylesheets for almost everything. They separate content from presentation, keep HTML clean, and let one change ripple across an entire site.

Method Scope Reusable? Typical use
External Whole site Yes Default choice
Internal One page Within page Single-page docs, prototypes
Inline One element No Rare; email HTML, quick overrides

The Cascade: Why "Cascading" Matters

When multiple rules target the same element, CSS resolves the conflict using three factors, checked in order:

  1. Importance and origin — an !important declaration beats a normal one; author styles beat browser defaults.
  2. Specificity — a more specific selector wins. An ID beats a class, and a class beats a plain element selector.
  3. Source order — if importance and specificity tie, the rule written last wins.

Consider this conflict:

p { color: black; }
.intro { color: gray; }

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

The paragraph renders gray. Both rules match, but .intro (a class) is more specific than p (an element), so it wins regardless of order. Understanding this priority system is the single most useful skill for debugging CSS that "won't apply" — a deeper walkthrough lives in our guide to CSS specificity.

Inheritance adds another layer: some properties (like color and font-family) pass down from a parent to its children automatically, while others (like margin and border) do not. That is why setting a font on body cascades through the whole page, but setting a border does not.

A Complete Mini Example

Here is a small but real snippet you can drop into an HTML file and see working in any modern browser:

:root {
  --brand: #2563eb;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2937;
  margin: 0;
}

.button {
  background: var(--brand);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.button:hover {
  background: #1e40af;
}

This example uses a custom property (--brand) for a reusable color, sets readable defaults on body, and gives a button a smooth hover transition. Custom properties, the :root selector, and transition are all supported in every current browser.

CSS vs HTML vs JavaScript

These three languages divide the work of a web page cleanly:

Language Job Example
HTML Structure and content "This is a heading and a button"
CSS Presentation and layout "Make the button blue and centered"
JavaScript Behavior and interactivity "When the button is clicked, open a menu"

Keeping these concerns separate is a core principle of maintainable front-end code. CSS should not contain logic, and HTML should not contain styling.

Common Beginner Mistakes

A few pitfalls trip up almost everyone learning CSS:

Where CSS Goes Next: Preprocessors

Plain CSS is enough to build anything, but on larger projects the lack of variables (until recently), functions, and reusable logic made big stylesheets repetitive. That gap is why tools like Sass became popular: they add features on top of CSS and compile down to regular CSS the browser understands.

If you are comfortable with the basics on this page, the natural next step is learning what Sass is and how it makes large stylesheets easier to maintain. Native CSS has since gained many of those features — custom properties, nesting, and math functions — but preprocessors remain widely used.

Key Takeaways

Start small: style a single page, experiment with colors and spacing, and watch how the cascade behaves. Everything else in CSS builds on these fundamentals.

FAQ

What does CSS stand for?

CSS stands for Cascading Style Sheets. 'Cascading' refers to how rules from multiple sources combine and resolve conflicts by priority, 'style' means visual presentation like color and typography, and 'sheets' means the .css files where rules are stored. It became a W3C standard in 1996 and is now maintained as modular specifications.

What is CSS used for?

CSS controls everything about how a web page presents itself: colors, backgrounds, fonts, spacing, borders, and sizing, plus full page layout with Flexbox and Grid. It also handles responsive design across devices, hover and focus states, transitions, and animations. Without it, every site would render as plain, unstyled text stacked top to bottom.

What is the difference between CSS and HTML?

HTML defines a page's structure and content, such as headings, paragraphs, images, and links. CSS defines presentation: how that content looks, including color, font, spacing, and layout. HTML says 'this is a heading'; CSS says 'make that heading blue, large, and centered.' They work together, with JavaScript adding interactive behavior.

How do you add CSS to a web page?

There are three ways: an external stylesheet linked with a <link> tag in the HTML head, internal styles inside a <style> block, and inline styles via a style attribute on an element. External stylesheets are recommended for almost all work because one file styles the whole site, the browser caches it, and it keeps content separate from presentation.

Is CSS a programming language?

CSS is a declarative style-sheet language, not a general-purpose programming language. It describes how elements should look rather than performing logic, loops, or calculations in the traditional sense. It does include some computational features like calc(), custom properties, and container queries, but for full programmatic behavior you pair it with JavaScript.

Is CSS hard to learn?

The basics of CSS are beginner-friendly: you can style text and colors within an hour. The harder parts are the cascade, specificity, and layout, which cause most confusion when styles don't apply as expected. Learning why a rule wins or loses, plus the box model and Flexbox, turns CSS from frustrating guesswork into predictable, controllable design.