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. CSS uses a straightforward syntax with English keywords for property names.

A style sheet is a list of rules. Each rule, or rule-set, contains one or more selectors and a declaration block. Selectors specify which part of the markup a style applies to, matching tags and attributes in the document. 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).

Selector

(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 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. 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. A table summarizes selector syntax, usage, and the CSS version that introduced it. A declaration block is enclosed in curly braces ({}) and contains a semicolon-separated list of declarations.

Each declaration has a property, a colon (:), and a value. Optional whitespace around declarations, colons, and semicolons improves readability. Properties are defined in the CSS standard. Each property has a set of possible values.

Declaration block

Some properties affect any element; others apply only to specific groups. 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.