What Is CSS?

CSS, short for Cascading Style Sheets, is the standard language used to describe how a web page looks. Where HTML defines a page’s content and structure — its headings, paragraphs, lists and links — CSS controls the presentation of that content, including colours, fonts, spacing, sizing and the overall layout. It is one of the three core technologies of the open web, alongside HTML and JavaScript, and it is maintained as a public standard by the World Wide Web Consortium (W3C).

Separating content from presentation

The central idea behind CSS is the separation of content from presentation. In the early web, appearance was often mixed directly into the markup using now-obsolete HTML tags and attributes. That approach made pages repetitive and hard to change: adjusting a heading colour might mean editing dozens of individual tags. CSS solves this by keeping styling rules in one place, separate from the document’s content.

This separation brings several practical benefits. A single stylesheet can control the appearance of an entire website, so a change made once is reflected everywhere. The HTML stays cleaner and more meaningful, which helps assistive technologies such as screen readers interpret a page correctly. It also allows the same content to be presented differently depending on context — one style for screens, another for printing, and adjustments for small mobile displays.

How CSS rules are written

CSS is built from rules. Each rule has two parts: a selector, which identifies the elements to style, and a declaration block, which lists the properties to change and the values to apply. A simple rule might select every paragraph and set its text colour and font size. Selectors can target elements by their type, by a class or identifier attached in the HTML, or by their relationship to other elements.

Each declaration pairs a property with a value, such as colour with a named colour, or a measurement with a unit like pixels or ems. Hundreds of properties exist, covering text, backgrounds, borders, spacing, positioning and animation. Modern layout systems such as Flexbox and Grid, both defined in CSS, make it possible to arrange complex, responsive designs that adapt to different screen sizes without resorting to older, fragile techniques.

The cascade and specificity

The word “cascading” describes how CSS resolves conflicts. Because styles can come from several sources — the browser’s own defaults, the site author’s stylesheets, and in some cases user preferences — more than one rule can apply to the same element. The cascade is the ordered process that decides which value ultimately takes effect.

Three factors drive this decision: the origin and importance of a rule, its specificity, and its order of appearance. Specificity is a weighting based on how precisely a selector targets an element; a rule aimed at a single identified element outweighs a broad rule aimed at every paragraph. When two rules have equal weight, the one written later wins. A related mechanism, inheritance, lets certain properties pass down from a parent element to the elements nested inside it, so a font set on a container can flow through to its contents.

How CSS reaches the page

There are three ways to attach CSS to a document. An external stylesheet is a separate file linked from the HTML and is the usual choice for real sites, because one file can serve many pages. An internal stylesheet sits inside a <style> block in the page itself. Inline styles are written directly on an individual element and are generally discouraged, as they scatter presentation back into the content and are hard to maintain.

When a browser loads a page, it reads the HTML to build a model of the document, then reads the CSS and works out which rules apply to each element. It uses those computed styles to paint the page on screen. Because browsers follow the same published standards, a well-written stylesheet produces broadly consistent results across different software, although designers still test their work in several browsers to catch differences.

Why CSS matters

CSS is what makes the web both usable and visually varied. It underpins responsive design, allowing one site to work on a phone, a tablet and a desktop monitor. It supports accessibility by letting text resize cleanly and by keeping meaningful content free of presentational clutter. And it is a genuinely open standard, evolving continually as new features are proposed, specified and implemented across browsers.

For anyone learning how the web is built, CSS is a natural companion to understanding what a web browser does with a page, and how documents connect to one another through a hyperlink. Together with HTML and JavaScript, it forms the foundation on which almost every website you visit is constructed.