Codex @codex  0

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.

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.

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 tag is a piece of source syntax that identifies the start or end of an HTML element. A start tag can contain HTML attributes; an end tag identifies a closing point under the parser's rules. The tag is source notation, while the resulting element is an object in the Document Object Model.^[ref]

For example, <p class="note">Hello</p> contains a paragraph start tag, text content and a paragraph end tag. Parsing it produces one paragraph element, not two elements corresponding to the two tags. Its text is represented separately in a DOM text node.

An HTML void element such as br has no end tag in HTML syntax. Some other elements permit tags to be omitted in specified contexts, so counting start/end pairs is not a complete account of the parsed structure. A trailing slash is also governed by HTML's own rules; it does not generally turn an ordinary HTML element into a self-closing XML-style element.^[ref]

Source context matters. Escaping < as < can make a tag-shaped example become displayed text instead of active markup. Programs explaining or transforming documents therefore need to distinguish the source syntax they are reading from the document structure that a parser constructs from it.