Cascading Style Sheets

Cascading Style Sheets (CSS)
Filename extensions	.css
Internet media type	text/css
Developed by	World Wide Web Consortium (W3C)
Initial release	December 17, 1996; 27 years ago
Type of format	Style sheet language
Container for	Formatting instructions for structured documents
Standard(s)	CSS 1, CSS 2.1, CSS 3 (modularized)
Website	w3.org/Style/CSS/

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.

Syntax [edit]

CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.

Selector [edit]

In CSS, selectors declare which part of the markup a style applies to by matching tags and attributes in the document itself. Selectors may apply to:

• All elements of a specific type, such as the second-level head <h2>.
• Elements specified by an attribute, particularly id (unique within a page) or class (can apply to multiple elements).
• Elements in a specific relationship to others in the document tree (e.g., "a link inside a paragraph").

Declaration block [edit]

A declaration block consists of a list of declarations in braces. Each declaration itself consists of a property, a colon (:), and a value. If there are multiple declarations in a block, a semi-colon (;) must be used to separate each declaration.

p {
  color: red;
  text-align: center;
}

In the example above, p is the selector (it targets all <p> elements), while color: red; and text-align: center; are the declarations.

History [edit]

CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN. Several other style sheet languages for the web were proposed around the same time, and discussions on the www-style mailing list and at the International Conference on the World Wide Web led to the first W3C CSS Recommendation (CSS1) being published in 1996.

Bert Bos, who became the co-author of CSS1, had developed a browser called Argo that used its own style sheet language. Lie and Bos worked together to develop the CSS standard. The "Cascading" part of the name was a unique feature, allowing multiple style sheets to influence the look of a page through a system of priorities.

Level	Status	Date	Key Features
CSS 1	Recommendation	Dec 1996	Font properties, colors, alignments, margins, borders, padding.
CSS 2	Recommendation	May 1998	Absolute/relative positioning, z-index, media types, bi-directional text.
CSS 2.1	Recommendation	June 2011	Fixes errors in CSS2, removes poorly supported features.
CSS 3	Modularized	1999–Present	Flexbox, Grid, Transitions, Animations, Multi-column layout.

The "Cascading" Nature [edit]

The "Cascade" is the algorithm that determines which CSS rules apply to an element when multiple rules conflict. It takes into account several factors:

Importance

The !important keyword takes precedence over normal declarations.

Specificity

A measure of how specific a selector is. For example, an ID selector (#header) is more specific than a class selector (.main-nav), which is more specific than an element selector (div).

Source Order

If two rules have the same importance and specificity, the one defined last in the style sheet wins.

Layout Models [edit]

Before modern layout techniques, web designers used HTML tables or CSS "floats" to position content. Modern CSS provides robust engines for complex layouts.

Box Model [edit]

Every element in CSS is treated as a rectangular box. The box model describes the space occupied by an element. It consists of four parts:

1. Content: The actual text or images.
2. Padding: The space between the content and the border.
3. Border: A line surrounding the padding and content.
4. Margin: The space outside the border, separating the element from its neighbors.

Flexbox and Grid [edit]

Flexible Box Layout (Flexbox) is a one-dimensional layout model for distributing space among items in an interface and powerful alignment capabilities. It is ideal for components like navigation bars or galleries.

CSS Grid Layout is a two-dimensional layout system for the web. It lets authors align elements into columns and rows, providing much more control over the layout of a whole page than Flexbox.

Advantages [edit]

Using CSS provides several significant benefits to web developers and users:

• Consistency: By using a single CSS file for an entire website, every page can maintain a uniform look and feel.
• Bandwidth: Because the browser caches the CSS file after the first request, subsequent pages load faster as only the HTML content needs to be downloaded.
• Device Compatibility: CSS "Media Queries" allow the same content to be presented differently depending on the screen size (Responsive Web Design), optimizing the experience for mobile, tablet, and desktop users.
• Accessibility: Separating presentation from content allows screen readers and other assistive technologies to process the structural HTML more effectively.

Generation[edit]

This article was generated autonomously. No human authored the content.

Provider	gemini
Model	gemini-3-flash-preview
Generated	2026-03-20 22:02:40 UTC
Seed source	curated (deadlink)
Seed	Cascading Style Sheets (CSS): the stylesheet language for the web