Web Fundamentals

What Is CSS and What Is It Used For?

By the CodeCompiler Team · 9 min read

If HTML is the skeleton of a web page, CSS is everything that gives it a face. CSS, short for Cascading Style Sheets, is the language used to describe how HTML content should actually look: colors, fonts, spacing, positioning, animations, and how a layout should adapt across everything from a small phone screen to a huge desktop monitor. Without CSS, every website would look like a plain document from the early 1990s — black text on a white background, default fonts, no layout to speak of.

Separating Structure From Presentation

One of the most important ideas behind CSS is the separation of content from presentation. HTML describes what something is — a heading, a paragraph, a button. CSS describes how it should look — its color, size, font, spacing, and position. This separation is powerful because it means the same HTML structure can look completely different depending on which stylesheet is applied to it, without changing a single line of the underlying markup. It's also why a well-built website can offer a light mode and a dark mode, or a mobile layout and a desktop layout, often by swapping out CSS rules rather than rewriting the HTML itself.

Selectors: Targeting the Right Elements

CSS works by writing rules that target specific HTML elements and describe how they should be styled. A rule is made of a selector, which identifies which elements the rule applies to, and a set of declarations, which describe the actual styling:

h1 {
  color: #1c2226;
  font-size: 2rem;
  margin-bottom: 1rem;
}

Here, h1 is the selector, matching every top-level heading on the page, and the lines inside the curly braces are declarations, each setting one visual property. Selectors can be as simple as an element name like h1, or far more specific — targeting a particular class (.card), a unique ID (#header), elements nested inside other elements, or even elements in a particular state, like a button being hovered over with the mouse (button:hover).

The "Cascade" in Cascading Style Sheets

The word "cascading" in CSS refers to the specific set of rules the browser follows when multiple style rules could apply to the same element — which is extremely common in real-world stylesheets. The cascade considers several factors, in roughly this order of importance: whether a rule is marked !important, how specific the selector is (an ID is more specific than a class, which is more specific than a plain element selector), and finally, which rule was declared last in the stylesheet, if all else is equal.

Understanding the cascade is one of the most important skills in CSS, because most confusing "why isn't my style applying?" bugs come down to a misunderstanding of specificity or ordering, not a syntax mistake.

From Simple Styling to a Full Layout System

Early CSS was mostly used for typography and simple visual touches — colors, fonts, borders. Complex page layout, ironically, was often achieved using HTML tables, which were never really designed for that purpose and produced messy, inflexible markup. Over the past decade and a half, CSS has evolved dramatically to include powerful, purpose-built layout systems:

Flexbox — designed for laying out items in a single row or column, distributing space and alignment between them with very little code.
CSS Grid — designed for two-dimensional layouts, letting you define rows and columns explicitly and place items precisely within that grid.
Media queries — allow different styling rules to apply depending on the size of the screen or device, which is the foundation of responsive web design.

We cover this evolution in far more detail, version by version, in The Evolution of CSS Over the Years.

Worth remembering: CSS doesn't just make pages "prettier" — it's directly responsible for usability and accessibility too. Sufficient color contrast, readable font sizes, and layouts that adapt sensibly to different screen sizes are all CSS concerns with a direct impact on whether real people can actually use your site.

How CSS Connects to HTML

There are three ways to attach CSS to an HTML document: an external stylesheet file linked with a <link> tag (the most common and maintainable approach for real projects), an internal <style> block inside the page's <head>, or inline style attributes applied directly to individual elements. External stylesheets are generally preferred because they keep styling logic separate from content, can be cached by the browser across multiple pages, and are far easier to maintain as a project grows. We explain exactly how these three languages hand information back and forth in our article How Do HTML, CSS and JavaScript Communicate With Each Other?.

Key takeaways

CSS describes how HTML content should look and be laid out — it handles presentation, not structure or logic.
CSS rules are made of selectors, which target elements, and declarations, which set visual properties.
The "cascade" determines which rule wins when multiple rules could apply to the same element, based on importance, specificity, and order.
Modern CSS includes powerful layout systems like Flexbox and Grid, plus media queries for responsive design.
Separating content (HTML) from presentation (CSS) makes websites easier to maintain, theme, and adapt across devices.

Style your first element right now

Open the editor, write a few CSS rules, and see your page transform instantly in the live preview — no build tools required.

Open the Free Online Compiler →