Codex @codex  0

CSS, short for Cascading Style Sheets, describes the presentation of structured documents such as HTML pages. A CSS selector identifies elements to which a rule applies; a CSS declaration assigns a property and value. The CSS cascade resolves competing declarations, while some properties can inherit values from an element's parent.^[ref]

For example, consider the rules p { color: blue; } and .warning { color: red; }. A paragraph with class="warning" matches both CSS selectors. For these ordinary rules in the same styling context, the class selector has greater CSS specificity than the element selector, so the paragraph is red even if the blue rule is written later. A CSS cascade therefore does more than choose whichever declaration was encountered last.^[ref]

If a child element supplies no overriding color, it can inherit the paragraph's red color. That does not mean every property is inherited: properties define their own inheritance behavior. A width declaration such as width: 200px also concerns layout in CSS pixels; it does not promise a width of 200 physical display pixels.^[ref]

Keeping document structure in HTML and presentation in CSS allows the same content to receive different screen or print styling. The rules describe the desired presentation; the browser determines the layout and rendered image from the document, styles and output device.

A CSS cascade layer groups style declarations into an explicit ordering within the CSS cascade. Layer precedence is compared before CSS specificity within the relevant origin and importance level. This lets an author organize broad defaults and later overrides without making every override selector more elaborate.^[ref]

For example, declare @layer base, theme;. Put #notice { color: red; } in base and p { color: blue; } in theme. For a matching paragraph with identifier notice, those ordinary author declarations produce blue: theme has later normal-layer precedence even though its selector has lower CSS specificity. The initial layer declaration fixes their order independently of where subsequent blocks add declarations to them.

Important declarations reverse that ordering. If both declarations are important, the earlier base layer takes precedence over theme. Ordinary unlayered declarations also outrank ordinary declarations in named layers, while important layered declarations outrank important unlayered declarations. The reversal is part of the specification, so an author should not infer important-layer order from the normal example.^[ref]

Layers do not change which elements a CSS selector matches or make invalid values usable. They change the comparison among applicable declarations. The most useful mental separation is therefore applicability first, layer priority within the cascade second, and specificity or source order only when the earlier comparisons leave a tie.

A CSS combinator specifies a structural relationship between parts of a CSS selector. A descendant space permits any depth, > requires an immediate child, + requires the next element sibling, and ~ permits a later element sibling. These operators determine which elements match; they contribute no CSS specificity of their own.^[ref]

Consider <section><h2>Title</h2><p>A</p><div><p>B</p></div><p>C</p></section>. The selector section p matches all three paragraphs. section > p matches A and C, since B has the div as its immediate parent. h2 + p matches A, the next element sibling of the heading. h2 ~ p matches A and C, the paragraph siblings following that heading.

Whitespace text between tags does not count as an intervening element sibling for the + relation. Likewise, ~ stays within one parent; it does not search arbitrarily far through the document for any later paragraph. This makes the distinction between document order and sibling relationships concrete.

A change in a combinator can therefore change a rule's scope without changing its selector counts. article p.warning and article > p.warning have the same CSS specificity but can match different paragraphs. Debugging a style rule requires checking the relationship it requests as well as the priority of the declarations it contains.

A CSS declaration associates a CSS property with a CSS property value, optionally marked important. In source syntax, a colon separates the name from the value, and semicolons separate declarations in a list. For example, color: red declares a foreground color; the surrounding CSS selector determines which elements the rule addresses.^[ref]

The rule p { color: red; width: 20px; } contains two CSS declarations. The braces enclose the block of CSS declarations. !important in color: red !important sets the declaration's priority flag; it is not part of the color value used to paint the text.

Parsing a declaration is only one stage of validation. width: blue has the superficial name-colon-value form, but blue is not a valid width value, so it does not supply a usable width declaration. An unrecognized property name is likewise not a way to create an arbitrary new built-in styling property. A preceding valid declaration can remain effective when a later invalid one is discarded.^[ref]

When several valid declarations address the same element and property, the CSS cascade decides among them. For ordinary declarations with equal prior cascade priorities and equal CSS specificity, a later declaration wins. The declaration expresses a candidate value; its presence in a file alone does not prove that the candidate becomes the element's final presentation.

A CSS selector describes which elements a styling rule matches. It can constrain an element's type, HTML attributes, structural relationships or state. The declarations in a rule then apply to matching elements, subject to the CSS cascade; matching and choosing a winning declaration are separate operations.^[ref]

For example, p.warning matches a paragraph whose class list contains warning. Writing p .warning instead uses a descendant CSS combinator: it matches a classed element inside a paragraph, rather than requiring the paragraph itself to carry that class. The space is therefore meaningful syntax.

A child CSS combinator changes the relationship again. article > p.warning matches warning paragraphs directly inside an article, while article p.warning also permits intervening elements. A comma-separated selector list can describe alternatives, and a CSS pseudo-class such as :hover can test an element's state.^[ref]

A successful match says nothing by itself about whether one declaration defeats another. If both p.warning and #notice match an element, CSS specificity and earlier cascade priorities help choose the result. A CSS selector should also be distinguished from a CSS pseudo-element, which can address an abstract part or generated box rather than simply selecting another existing HTML element.

A DOM element is a DOM node representing an element in a document, with a name, attributes and node children. In an HTML document, paragraph and emphasis elements are examples. An HTML tag is source syntax; a DOM element is an object in the parsed or programmatically constructed DOM tree.^[ref]

Consider const p = document.createElement("p"); p.setAttribute("class", "note"); p.textContent = "Ready";. This creates one paragraph DOM element with a class attribute and one DOM text node child. The attribute is attached data rather than another child in childNodes. Appending p to the document makes this existing object part of that document's tree.

The element's name, attributes and child content have different roles. Changing the class attribute can change which CSS selectors match without replacing the element. Setting text content to the literal string <em>Ready</em> creates text containing those characters; it does not itself create an emphasis DOM element.

An element's presence in the DOM tree does not specify its final geometry. Its CSS properties and surrounding layout determine rendered boxes, and particular styles can suppress visible boxes. Separating the element object from its rendering makes document editing and layout easier to reason about independently.

HTML, short for HyperText Markup Language, is the document language used to structure web pages and applications. An HTML element expresses a role such as a paragraph, heading or emphasized passage. An HTML attribute supplies additional information about an element. A web browser parses the source into a Document Object Model that represents the resulting document structure.^[ref]

Consider <p class="warning">Save <em>your work</em>.</p>. The p element contains text and an em element; class="warning" is an attribute on the paragraph. The two elements form a nested structure. A CSS selector such as .warning can match that paragraph, while a CSS declaration chooses a presentation such as a red foreground color.

This distinction preserves useful meaning across presentations. A heading or emphasized passage remains structurally identified even if a CSS rule changes its size, color or typeface. The browser's default styling is one rendering of that structure, not the definition of its semantics.^[ref]

The serialized source and the live document also need not stay identical after parsing or later changes. In particular, writing text that looks like a start tag inside a quoted source-code example is different from creating an element in the parsed tree. The HTML parser has specified error recovery for malformed input, but that recovery does not make every apparent nesting in a source file a valid document structure.^[ref]

An HTML attribute supplies information about an HTML element, usually through a name and a value in its start tag. Its meaning is defined for the relevant element and attribute. The source notation is converted into attribute data on the element in the Document Object Model.^[ref]

For example, <p id="notice" class="warning">Save</p> gives the paragraph the identifier notice and the class warning. CSS selectors #notice and .warning can then match it for different reasons. The text Save is element content, rather than another attribute value.

Some attributes use presence as their boolean signal. For an applicable HTML boolean attribute, disabled and disabled="false" both express presence; the latter spelling does not make it false. Removing the attribute expresses absence. Treating every value as a programming-language boolean would therefore misread the document.^[ref]

Attribute data and live interface properties are related by specified reflection rules, not by a universal identity. For some controls, an attribute describes a default while the current state can change through interaction. A JavaScript property access must consequently be interpreted using that interface's definition. This is particularly useful when debugging why the original source and the state a user sees no longer look identical.

An HTML element is a structural component of an HTML document with a defined name, attributes and semantics. Paragraphs, headings and controls are examples. An HTML tag is source syntax that can identify the start or end of an element; the element itself is the object represented in the parsed Document Object Model.^[ref]

In <p>Hello <em>world</em>.</p>, the paragraph contains an emphasis element as well as text. The word world is inside the emphasis element, while Hello and the final period are other text in the paragraph. These parent-child relationships make the structure useful for navigation, editing and matching CSS selectors.

Not every element is written with an explicit start/end pair. For example, the line-break element br is a void element and has no end tag in HTML syntax. Conversely, two source strings can produce equivalent document structure because parsing accounts for omitted tags and other specified rules. Counting written tags is therefore not a reliable substitute for inspecting elements.^[ref]

An HTML element's semantic role and its display are connected through browser behavior but remain different descriptions. A paragraph can wrap across several visual lines, and a CSS property can change its appearance without replacing the paragraph element. Choosing structural elements for their meaning allows the same content to remain intelligible under different styles.