Definition:

CSS, short for Cascading Style Sheets, is a language used to describe the presentation of documents written in HTML, XML, and other markup languages. It controls colors, typography, spacing, sizes, layout, adaptation to screens, and other visual aspects without mixing those decisions into the main content structure.

CSS is one of the core languages of the open web. A browser combines the applicable style rules, resolves their priority through the cascade, and renders the result on screen, on paper, or through other supported media.

How CSS works

A basic CSS rule contains a selector and a declaration block. The selector identifies the affected elements, and each declaration associates a property with a value:

.card {
  background-color: white;
  border: 1px solid #d9e1e5;
  padding: 1rem;
}

In this example, .card selects elements that have that class. The properties define the background, border, and internal spacing. The browser parses valid rules and calculates the final style of each element.

Selectors can refer to element types, classes, identifiers, attributes, states, or relationships within the document. Declarations may use absolute or relative units, keywords, colors, functions, and custom properties.

What the cascade means in CSS

The word “cascade” describes the process that determines which value applies when several declarations affect the same property of an element. It does not merely mean that a page can load several style sheets.

The browser considers factors such as rule origin, importance, cascade layers, selector specificity, scoping proximity, and order of appearance. Some properties are also inherited from ancestor elements, although inheritance and the cascade are related but separate mechanisms.

A more specific rule does not always win. An important declaration, a differently prioritized layer, or a rule from another origin may change the outcome. Understanding this process helps prevent unnecessarily complex selectors and routine reliance on !important.

Ways to apply CSS to a page

CSS can be added to a document in three main ways. The choice depends on scope, reuse, and project requirements:

External style sheet: the HTML document links to a .css file. This makes it easier to share styles across pages, organize code, and use browser caching.
Internal style block: rules are included inside a <style> element in the document. This can support page-specific styles or particular loading optimizations.
Inline style: a declaration is written in an element’s style attribute. It has occasional uses but becomes difficult to reuse and maintain when spread throughout a site.

A page may combine these approaches. The location of a declaration does not determine its priority by itself, because the result depends on all the rules involved in the cascade.

What CSS is used for

CSS defines the presentation and visual behavior of an interface. Its capabilities include:

Typography, colors, backgrounds, borders, shadows, and transparency.
Margins, padding, dimensions, and the box model.
Layout through normal flow, positioning, flexbox, grid, and columns.
Adaptive designs using media queries and container queries.
Interactive states through pseudo-classes such as :hover and :focus-visible.
Reusable components through classes, custom properties, and layers.
Transforms, transitions, and animations.
Styles for screens, printing, and other media conditions.

CSS can be applied to HTML, SVG, XML, and other compatible documents. It does not create semantic structure or application logic by itself: those roles usually belong to the markup language and JavaScript.

CSS and responsive design

Responsive design uses CSS to react to available space and selected characteristics of the device or user. Relative units, flexible images, flexbox, and grid make it possible to build layouts that do not depend on one fixed width.

Media queries apply rules according to conditions such as viewport width, orientation, or motion and contrast preferences. Container queries allow a component to adapt to the space of its container instead of relying only on the size of the viewport.

Responsive design involves more than adding mobile breakpoints. It should also preserve readability, order, navigation, touch target sizes, and zoom or reflow without losing content.

CSS evolution and standardization

Håkon Wium Lie proposed CSS in 1994, and the W3C published CSS1 as a recommendation in 1996. CSS2 later extended the language, while CSS 2.1 consolidated corrections and interoperability.

After CSS 2.1, the language moved to a modular development model in which different components progress at different rates. Color, selectors, backgrounds, grid, and transforms can each have their own levels. Therefore, there is no single version called CSS4, and modern CSS does not all belong to one homogeneous version called CSS3.

The W3C publishes specifications and snapshots that collect stable states of the language. Actual support for a feature depends on its implementation in browsers, so current documentation and compatibility data should be checked before relying on recent functionality. The MDN CSS reference provides current syntax, compatibility information, and examples.

CSS, performance, accessibility, and SEO

CSS does not improve organic rankings automatically. Its implementation can nevertheless affect rendering, mobile experience, visual stability, and the time required to display content. A large render-blocking sheet or one filled with unused rules can reduce performance.

Useful practices include carefully removing unused CSS, reducing duplication, splitting resources when justified, compressing them, applying suitable caching, and avoiding unnecessary dependencies. Critical CSS can help display the initial portion of a page sooner, but incorrect extraction may cause incomplete or duplicated styles.

Accessibility also depends on implementation. Styles should preserve sufficient contrast, visible focus indicators, understandable order, zoom, and reflow. Animations can respect prefers-reduced-motion, while visually hiding an element requires distinguishing between decorative, visible, interactive, and assistive-technology content.

Web performance optimization should assess CSS together with HTML, fonts, images, JavaScript, caching, and actual browser behavior. Minification or a smaller file is a technical means, not an isolated guarantee of speed, accessibility, or higher rankings.