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 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 property is a defined parameter of presentation or layout, such as color, width or margin-left. Its definition specifies allowed values, an initial value, whether it inherits, and how values are computed. A CSS declaration proposes a value for a property on the elements matched by its rule.^[ref]

For example, width: 50% names the width property and supplies a percentage value. If that percentage resolves against a containing width of 400 CSS pixels, the resulting width is 200 CSS pixels in the simple case. The same declaration in a 600-pixel containing width can yield 300 pixels. A property name therefore identifies a parameter, while its eventual layout value can depend on context.

Different properties have different value grammars and defaulting behavior. A color word can be valid for color but invalid for width. Foreground color normally inherits, while width does not inherit by default. The absence of a width declaration is therefore different from automatically copying the parent's width.^[ref]

A property also differs from an HTML attribute with similar wording. Attribute interpretation is part of the element's document semantics; a CSS property participates in the styling value process, including the CSS cascade. Keeping the property definition, individual declarations and the resulting CSS used value separate makes styling behavior much easier to explain.

The Document Object Model represents a document as a DOM tree of DOM nodes and defines operations for examining and changing that tree. In an HTML document, elements and text are different node kinds. The model gives programs access to document structure independently of how a source file happened to spell that structure.^[ref]

For example, <p>Hello <em>world</em>.</p> creates a paragraph element with a text child, an emphasis element and another text child. The emphasis element itself contains the text world. Looking only for element children would miss the text nodes between and inside those elements.

A short JavaScript example constructs a paragraph directly:
const p = document.createElement("p"); p.textContent = "Hello"; document.body.appendChild(p);
The first operation creates an element, assigning textContent supplies its text, and appending it inserts it into the document. Creating an element alone does not place it on the page.^[ref]

The Document Object Model is also different from the geometry computed for display. A CSS declaration can change line wrapping or hide an element without deleting that element from the tree. Conversely, inserting a DOM node can alter the tree before or without making a visible change. Separating document structure from rendered boxes helps explain both programmatic editing and browser layout.

A DOM node is an object participating in the node model of the Document Object Model. Documents, DOM elements, DOM text nodes, DOM comment nodes and DOM document fragments are different node kinds. They share operations and relationships defined by the Node interface, while particular kinds expose additional data and constraints.^[ref]

For example, a paragraph element can contain a text node. The paragraph has a tag name and attributes; its text child stores character data. Both are DOM nodes, but an element-specific operation such as setting an attribute is not thereby available on the text node.

Insertion also concerns object identity. Suppose an existing paragraph is a child of element A. Executing B.appendChild(paragraph) moves that same node under B, removing it from A's child list. It does not automatically make a second paragraph. Cloning is a separate operation, with its own treatment of descendants.^[ref]

A newly created node can exist without being connected to a displayed document. Conversely, a connected node need not produce a visible box: a CSS declaration can suppress its display. A reference to a node therefore identifies a document-model object, not a promise about visibility or a fixed screen position. Reading the node kind and its current tree relationships is the appropriate starting point for manipulation.

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]