Computing & Digital Codexery

CSS

Style sheet language for web document presentation.

CSS

CSS is a style sheet language that controls how documents written in markup languages like HTML or XML appear. Alongside HTML and JavaScript, it forms one of the core technologies of the World Wide Web. Its main purpose is to separate a document's content from its presentation—things like layout, colors, and fonts.

This separation brings several benefits. Content becomes more accessible because it can be written without worrying about how it looks. It also gives developers more flexibility and control over presentation. By placing CSS rules in a separate `.css` file, multiple web pages can share the same formatting, which reduces repetition and complexity in the markup. That shared file can also be cached by browsers, speeding up page loads across those pages.

Because content and formatting are separate, the same markup can be displayed differently depending on the medium: on a screen, in print, through a speech-based browser or screen reader, or on a Braille device. CSS also includes rules for adjusting formatting when content is accessed on a mobile device.

The term "cascading" refers to the predictable priority scheme that decides which style rule applies when multiple declarations target the same element. The World Wide Web Consortium (W3C) maintains the CSS specifications. The MIME type for CSS is `text/css`, registered in RFC 2318 (March 1998), and the W3C offers a free CSS validation service.

Beyond HTML, CSS works with XHTML, plain XML, SVG, and XUL. It is also used in the GTK widget toolkit.

**Syntax**

CSS uses a straightforward syntax with English keywords for property names.

**Style sheet**

A style sheet is a list of rules. Each rule, or rule-set, contains one or more selectors and a declaration block.

**Selector**

Selectors specify which part of the markup a style applies to, matching tags and attributes in the document.

**Selector types**

Selectors can target: - All elements of a specific type, like all `h2` headers. - Elements by attribute, especially: - `id`: a unique identifier within the document, written with a hash prefix (e.g., `#id`). - `class`: an identifier that can mark multiple elements, written with a dot prefix (e.g., `.classname`). (Note: "CSS class" is a misnomer—the HTML `class` attribute is a markup feature separate from browser CSS subsystems.) - Elements based on their position relative to others in the document tree.

Classes and IDs are case-sensitive, start with a letter, and can include letters, numbers, hyphens, and underscores. A class can apply to any number of elements; an ID applies to only one.

**Pseudo-classes**

Pseudo-classes allow formatting based on information not in the document tree. For example, `:hover` applies styles only when a user points to an element (e.g., `a:hover` or `#elementid:hover`). Pseudo-classes (like `:link` or `:visited`) classify elements, while pseudo-elements (like `::first-line` or `::first-letter`) select partial elements. Pseudo-elements use double colons; pseudo-classes use single colons.

**Combinators**

Multiple simple selectors can be combined with combinators to target elements by location, type, id, class, or any mix. The order matters. For instance, `div .myClass {color: red;}` applies to elements of class `myClass` inside `div` elements, while `.myClass div {color: red;}` applies to `div` elements inside elements of class `myClass`. This differs from concatenated selectors like `div.myClass {color: red;}`, which targets `div` elements that also have class `myClass`.

**Summary of selector syntax**

A table summarizes selector syntax, usage, and the CSS version that introduced it.

**Declaration block**

A declaration block is enclosed in curly braces (`{}`) and contains a semicolon-separated list of declarations.

**Declaration**

Each declaration has a property, a colon (`:`), and a value. Optional whitespace around declarations, colons, and semicolons improves readability.

**Properties**

Properties are defined in the CSS standard. Each property has a set of possible values. Some properties affect any element; others apply only to specific groups.

**Values**

Values can be keywords (e.g., `center`, `inherit`) or numerical values (e.g., `200px`, `50vw`, `80%`). Color values can be keywords (e.g., `red`), hexadecimal (e.g., `#FF0000` or `#F00`), RGB (e.g., `rgb(255, 0, 0)`), RGBA with alpha transparency (e.g., `rgba(255, 0, 0, 0.8)`), or HSL/HSLA (e.g., `hsl(0 100% 50%)`, `hsl(0 100% 50% / 0.8)`). Non-zero numeric linear measures must include a length unit (like `px` or `vw`) or a percentage sign.

field
Web technology
known_for
Separation of content and presentation in web documents
maintained_by
World Wide Web Consortium (W3C)
used_with
HTML, XHTML, XML, SVG, MathML, XUL, GTK widget toolkit

Lore & Background

CSS has a simple syntax using English keywords to specify style properties. A style sheet consists of a list of rules, each with one or more selectors and a declaration block. Selectors declare which part of the markup a style applies to by matching tags and attributes, including types (e.g., h2), IDs (prefixed with #), classes (prefixed with .), and relationships in the document tree. Pseudo-classes like :hover permit formatting based on information not in the document tree, while pseudo-elements like ::first-line select partial elements. Combinators join multiple simple selectors to specify elements by location, type, id, class, or combination.

Reader's Guide

Before CSS, nearly all presentational attributes of HTML documents were contained within the HTML markup, requiring explicit description of font colors, background styles, alignments, borders, and sizes. CSS allows authors to move much of that information to a separate style sheet, resulting in simpler HTML. This separation improves content accessibility, enables multiple web pages to share formatting via a .css file, and allows the .css file to be cached for faster page load speeds. It also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice, and on Braille-based tactile devices. The cascading priority scheme determines which declaration applies when multiple declarations match an element. The W3C operates a free CSS validation service. CSS is used not only with HTML but also with XHTML, plain XML, SVG, and XUL, and in the GTK widget toolkit.

Did You Know?

The Quantum Bit: A New Kind of Information

The fundamental unit of quantum computation, the qubit, mirrors the role of the classical bit but operates under radically different rules. Where a classical bit settles into one of two definite values, a qubit can inhabit a linear combination of both states simultaneously—a condition called quantum superposition. When a measurement is finally performed, the qubit collapses to one of those two states according to a probabilistic rule, meaning the outcome is never guaranteed in advance. This is where the true power of quantum computing emerges: by carefully manipulating qubits, a quantum processor can exploit wave interference to amplify the probability of landing on the correct answer while suppressing wrong ones. Designing quantum algorithms is, at its core, the art of engineering that amplification. Alongside superposition, phenomena such as entanglement give quantum computers their extraordinary parallelism, enabling them to explore vast solution spaces in ways no classical machine can replicate. The result is the potential for exponential speedups on certain problem classes, though the hardware required to harness these effects remains, for now, largely experimental and confined to specialized tasks.

The Algorithmic Revolution: From Oracle Problems to Cracking Encryption

The theoretical foundation of quantum computing was laid across two decades of increasingly bold ideas. A few years later, Yuri Manin and Richard Feynman independently argued that building hardware directly on quantum phenomena could sidestep the exponential overhead classical machines face when simulating quantum dynamics. The following year, Grover's algorithm delivered a quantum speedup for unstructured search, and Seth Lloyd confirmed Feynman's original conjecture by proving quantum simulators could model quantum systems without exponential cost.

The Supremacy Claim and the NISQ Reality

For years, quantum computing lived almost entirely in theory. The first experimental proof-of-concept came in 1998, when researchers built a two-qubit machine that demonstrated the technical feasibility of the approach. Subsequent experiments gradually increased qubit counts and chipped away at error rates, but the field remained small-scale. The claim ignited fierce debate. IBM pushed back, arguing that with optimized algorithms its Summit supercomputer could finish the same task in about two and a half days, challenging where the true threshold for such a milestone should be drawn.

The Engineering Gauntlet: Decoherence, Hardware, and Global Investment

The central obstacle standing between quantum computing's theoretical promise and real-world utility is decoherence. If a physical qubit is not sufficiently isolated from its surrounding environment, it leaks quantum information, introducing noise and error into every calculation. Tackling this problem has driven researchers toward two leading hardware platforms. Superconducting circuits isolate an electrical current by eliminating resistance, while ion traps confine a single atomic particle using carefully shaped electromagnetic fields. Both approaches aim to extend coherence times and drive error rates down, but large-scale physical implementation remains a formidable engineering challenge. Despite this massive financial commitment, quantum computers are not yet practical for everyday applications. The tasks on which quantum devices have been shown to outperform classical machines—often labeled quantum advantage or quantum supremacy—are not necessarily the tasks that matter most in industry or daily life.

Frequently Asked Questions

Who is CSS?

CSS (Cascading Style Sheets) is a style sheet language that dictates how markup documents such as HTML or XML are visually rendered. It governs layout, color, typography, and spacing, letting authors keep a document's content completely separate from its appearance.

What are CSS's powers/role?

CSS lets developers attach presentation rules to elements without altering the underlying structural markup, so a single page can be restyled by swapping one stylesheet. This separation of concerns is its core design philosophy and the reason it pairs naturally with HTML, XHTML, SVG, MathML, and even the GTK widget toolkit.

How does CSS's story end?

CSS has no fixed ending; it is a living specification continuously expanded by the W3C through new modules and levels. Features like Grid Layout, Custom Properties, and Container Queries keep adding chapters, so the language is still actively evolving.

Why is CSS important?

Together with HTML and JavaScript, CSS forms one of the three pillars of the World Wide Web. Without it, sites would depend on inline attributes or server-side templates for every visual change, making consistent, maintainable design across large projects extremely difficult.

More in Computing & Digital 1-24

Spotted an error? Know more?

This is a living reference — every entry is fact-audited, and reader corrections feed straight into our audit queue. Suggest an edit · See this site's audit record

Comments

Loading…
Open in the interactive codex →