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.

The CSS inline direction is the base directionality used for text within a line and for related direction-dependent layout. The direction property selects ltr or rtl; together with CSS writing mode, this establishes the mapping of logical inline-start and inline-end to physical directions.^[ref]

For a horizontal example with ordinary start-aligned text, direction: ltr places inline-start at the left edge, while direction: rtl places it at the right. A label aligned to inline-start can consequently change sides without changing its source text. In vertical writing, interpreting inline-start requires the writing-mode mapping too; it is not always a physical left or right edge.

Base direction is not an instruction to reverse every letter. The Unicode Bidirectional Algorithm considers the directional properties of text and the surrounding embedding or isolation context. A left-to-right sequence such as ABC can retain its internal order inside a right-to-left paragraph. CSS uses that algorithm rather than treating a string as an undifferentiated list to reverse.^[ref]

For HTML, the specification recommends expressing a document's directional semantics with markup such as <p dir="rtl">ABC</p> instead of depending solely on a CSS override. That example establishes a right-to-left paragraph base; it does not promise the visible sequence CBA. Keeping the directional information in the document also preserves it when styling is unavailable.^[ref]

CSS block flow direction remains a separate choice. A right-to-left horizontal paragraph still participates in a top-to-bottom block flow under horizontal-tb. Conversely, vertical lines can progress across a page under the block rules while their inline base direction follows its own mapping.

The scope of an override matters as well. A direction declaration on an ordinary inline box with unicode-bidi: normal does not by itself open a new embedding level for reordering. Diagnose the box's direction, its writing mode and the relevant bidirectional scope together.^[ref]

CSS leading is the extra allowance around the font ascent and font descent when CSS constructs the vertical extent associated with a glyph. Let $A$ be the positive ascent, $D$ the positive descent magnitude and $H$ the selected line height, all at the same font size and in the same units. The extra leading and the resulting extents above and below the text baseline areThe half-leading is a layout allocation. It need not be a visible blank strip, and $L$ may be negative.^[ref]

This explains a subtle effect of mixing fonts. In a simple baseline-aligned line containing only ordinary text CSS inline boxes, include the block's CSS strut among the contributions indexed by $i$. The CSS line box must extend far enough in each direction, givingThe two maxima can come from different contributions. Suppose one has $(A,D,H)=(11,3,18)$ CSS pixels, giving $(A^{\prime },D^{\prime })=(13,5)$, while another has $(8,4,20)$, giving $(12,8)$. If the CSS strut adds no larger extent, the resulting CSS line box is $13+8=21$ CSS pixels high, exceeding both declared line heights. The assumption of a common text baseline matters: other vertical alignments and inline objects require the fuller layout rules.^[ref]

Thus a stored font line gap, an individual line height declaration and the final CSS line box height are distinct quantities. Comparing only nominal font sizes cannot explain the mixed-font result.

A CSS pixel, written px, is a unit of length in CSS layout. Its reference definition concerns a visual angle, while the specification fixes the ratios between CSS absolute length units:within the CSS unit system. The browser can anchor these units to physical measurements or to a reference pixel appropriate to the output medium. Consequently, a CSS pixel does not necessarily equal one physical display pixel.^[ref]

For example, a box with width: 100px has a declared width of 100 CSS pixels. On a display mapping two device pixels to each CSS pixel along each axis, that width spans 200 device pixels before any additional transforms. A square of side 100 CSS pixels spans a $200\times 200$ device-pixel region in that simple mapping. The device pixel ratio connects these two coordinate scales.

The fixed ratio 96px = 1in does not measure a monitor's physical pixel density. A browser's on-screen 1in can differ from a measured physical inch when the reference-pixel anchor is used. Page zoom can also change the physical size of the layout's CSS pixels, even though the declared number 100px remains the same.^[ref]

A CSS pseudo-element represents an abstract styling target associated with an element, such as a typographic portion or generated content. Examples include ::first-line, ::before and ::after. It allows CSS to style parts of the rendering that need not be separate HTML elements in the ordinary document tree.^[ref]

For example, p::before { content: "Note: "; font-weight: bold; } can generate a bold prefix before a paragraph's content. The prefix participates in the rendering under the pseudo-element's rules, while the paragraph's ordinary text nodes remain unchanged. Reading the paragraph's textContent is therefore not a general way to recover every word a user sees on screen.

A typographic example is p::first-line. Which characters belong to the first rendered line depends on layout width, fonts and wrapping. Changing the width can move text into or out of that pseudo-element without inserting or deleting any DOM text nodes. Pseudo-elements also differ in which properties apply to them.^[ref]

A CSS pseudo-class instead adds a matching condition such as focus or sibling position. The visual similarity of their names does not make the two mechanisms interchangeable. Modern pseudo-element syntax uses a double colon; some older single-colon spellings persist for compatibility, so a spelling alone should be interpreted using the specified selector rules.

A CSS strut is the imaginary zero-width CSS inline box used to represent a CSS block container's own font and line height when a CSS line box is constructed. It supplies minimum extents on both sides of the text baseline, even when the actual text uses smaller metrics.^[ref]

Suppose the container has font ascent $A=12$, font descent magnitude $D=4$ and line height $H=20$ CSS pixels. Its CSS leading is $20-12-4=4$, so the strut contributes 14 above and 6 below the text baseline. A small text contribution with extents 7.5 above and 2.5 below still produces a line 20 CSS pixels high because the strut dominates both directions.

The minimum is geometric rather than merely a comparison of total heights. If another contribution extends 18 above and 2 below the same text baseline, the enclosing CSS line box becomes $18+6=24$ CSS pixels. Both the strut and the other contribution individually total 20. Keeping the separate upper and lower extents explains the extra height.

This construction concerns a CSS line box that participates in layout. CSS also specifies conditions under which empty line boxes are treated as nonexistent, so line-height:20px alone does not make every otherwise empty block 20 CSS pixels high.^[ref]

A DOM text node stores character data within a DOM tree. It represents text content rather than an HTML element with a tag name. One element can contain several text nodes separated by other nodes, and adjacent text nodes can also exist as distinct objects.^[ref]

For example, start with an empty paragraph and append document.createTextNode("A") followed by document.createTextNode("B"). The paragraph has two child nodes, its combined text content is AB, and it has no element children. Calling paragraph.normalize() merges adjacent text nodes and removes empty ones, so this example then has one text child containing AB.^[ref]

The distinction matters when editing. An operation expecting the first child to be an element can instead encounter a whitespace text node produced between tags. Traversing all child nodes and traversing only element children answer different questions.

Text insertion also differs from parsing markup. Assigning paragraph.textContent = "<em>Hi</em>" supplies literal text containing angle brackets; it does not create an emphasis element. A parser-driven operation has different semantics. Finally, rendered whitespace can be collapsed or wrapped by CSS, so the number and contents of text nodes alone do not determine the exact visible line layout.

A DOM tree is an ordered parent-child structure of DOM nodes in the Document Object Model. Children have an order, each node has at most one parent in a tree, and following parent relationships cannot form a cycle. A document tree is rooted at a document node; its document element is a different node within that structure.^[ref]

In <p>Hello <em>world</em>.</p>, the paragraph has three children: a text node containing Hello and a following space, the emphasis element, and a text node containing the period. The emphasis element has its own text child containing world. The word world is therefore a descendant of the paragraph, but not its direct child.

That distinction explains selector behavior. A child CSS combinator tests an immediate relationship, while a descendant combinator can follow multiple parent-child steps. Inspecting only element children also gives a different list from inspecting every child node, because DOM text nodes and DOM comment nodes are nodes too.

The DOM tree describes document structure rather than the exact source spelling or the boxes painted on screen. HTML parsing can create structure from omitted tags, and CSS can change rendering without inserting a document child. Attribute data is attached to elements under its specified model; it is not simply another ordinary child in the document's child list.^[ref]

First-line indentation shifts the beginning of the first formatted line of a text paragraph relative to its normal starting edge. In a left-to-right layout, a positive indent reserves space on the left; the corresponding starting edge is on the right in a right-to-left layout. In CSS, text-indent controls this placement.^[ref]

In a simple left-to-right column of width $W=40$ with indentation $d=10$, the first line begins at $x=10$ and has available typesetting line width $W-d=30$. Later lines can begin at $x=0$ and use all 40 units. A negative indent $d=-5$ instead places the start at $x=-5$, extending into the margin if no other layout constraint intervenes.

This changes the first line's geometry without adding printable glyphs. Replacing the indent by several stored spaces would couple the result to word spacing, white-space processing and the chosen computer font. A line breaking model can represent the change explicitly through its sequence of typesetting line widths.

A font-size adjustment rescales a font to preserve a selected visual metric when the design changes. Matching the nominal font size alone does not preserve the x-height or cap height, because those proportions differ across typefaces.

The x-height calculation gives a direct rule. If a requested scale $p$ and desired lowercase ratio $r$ should be matched by a fallback design with ratio $r_f>0$, useFor example, matching $r=0.55$ at 20 pixels per em with a fallback ratio $r_f=0.5$ requires 22 pixels per em. Both designs then have ideal lowercase body height 11 pixels. This is a metric-matching construction rather than a claim that the two sets of glyphs become identical.

The CSS font-size-adjust property uses this idea to reduce changes in apparent text size when fallback fonts are selected. Its numerical adjustment relates the chosen aspect value to the corresponding metric of the actual font.^[ref]

Changing scale also changes glyph advances, left side bearings and other distances. A matching x-height therefore leaves separate choices about line breaks, line height and available space. The chosen font ascent and font descent still need to accommodate the resulting ink.

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]

Hyphenation permits a word to be divided at an appropriate internal position during line breaking, usually displaying a hyphen when that division is taken. A hyphenation opportunity is a permitted choice, rather than an instruction to break every occurrence. The choice can help a narrow text paragraph fit without excessive word spacing.

A soft hyphen, Unicode U+00AD, marks such an optional position: in a suitable context, ex followed by a soft hyphen and ample can display as example on one line or as ex- followed by ample on the next. The soft hyphen normally remains invisible when no split is taken. An always-visible hyphen already present in the word has different display behaviour.^[ref]

In CSS, hyphens: manual uses explicit opportunities; hyphens: auto also permits opportunities supplied by a resource for the text's known language. The hyphenation resource and the line breaking algorithm answer different questions: where a split is linguistically allowed, and which allowed split best fits the layout. A discretionary break can also account for material inserted or replaced at the chosen split.^[ref]

Letter spacing, also called typographic tracking, adjusts spacing within a run of text. It is distinct from word spacing and from context-sensitive kerning. In CSS, the letter-spacing property controls additional spacing, with rules that respect the writing system rather than blindly separating every stored character.^[ref][ref]

A simple model illustrates the geometry. Suppose four already shaped units have combined advance $A=30$, and three selected internal gaps each receive an extra $t=0.5$. ThenThis is an explicitly chosen three-gap model. A glyph need not correspond to one stored character, so counting source characters is generally insufficient to determine those gaps. Text shaping, typographic ligatures and the script's joining behaviour must be considered when deciding where spacing may change.

The line height governs the vertical spacing allocated to a line of text. For a simple repeated run with fixed metrics, it sets the distance from one text baseline to the next. The gap between visible ink is a separate quantity, because different glyphs need not fill their allocated vertical region.

In an elementary single-font model, let $A$ be the positive font ascent, $D$ the positive magnitude of the font descent, and $G$ an added font line gap. ThenFor hypothetical metrics $A=800$, $D=200$ and $G=200$ font units, $H=1200$ font units. With 1000 font units per em and 20 pixels per em, the text baselines are 24 pixels apart. The line height can thus exceed the nominal font size.

CSS lays out inline content through line boxes. Its line-height participates in that calculation, and a block's declared value sets a minimum rather than guaranteeing that every mixed-content line has exactly that height. A taller inline object or a different alignment can enlarge a line box. The specification also describes how extra typographic leading is split above and below the chosen font metrics.^[ref]

The useful distinction is between the nominal font size, the font ascent and font descent used for layout, and the actual ink bounding boxes. They answer different geometric questions even when they are expressed in the same units.

A markup language describes annotations embedded in or associated with document content. Its syntax distinguishes ordinary content from instructions identifying structure, meaning or presentation. HTML is a concrete example: a paragraph and an emphasized phrase can be represented explicitly instead of inferred from their appearance.^[ref]

For example, <p>Save <em>your work</em>.</p> identifies a paragraph containing an emphasized phrase. The angle-bracketed HTML tags mark elements; the words between them supply content. A web browser can build a Document Object Model from this source, then use CSS to choose its presentation. Changing the emphasis styling need not change which phrase is structurally emphasized.

The syntax needs a way to represent its own reserved characters as content. In HTML, < can represent a literal less-than character in text rather than starting a tag. A document explaining markup therefore needs to distinguish a displayed example from active markup that the parser interprets as document structure.^[ref]

A markup language is useful when documents must be transformed, searched or rendered according to their structure. It does not follow that every source annotation creates a visible box, or that a visible line break implies a particular structural element. Source syntax, the parsed document and the final rendering are related representations with different jobs.

Pixel density measures how many pixels occupy a specified physical length or area. For a flat display with square, uniformly spaced pixels, its linear pixel density is often expressed as pixels per inch. Its reciprocal is the pixel pitch, the physical separation between corresponding points of neighbouring pixels.

If the display has horizontal and vertical counts $N_x,N_y$ and diagonal $D$ measured in inches, the Pythagorean theorem gives the linear pixel densityA hypothetical $1920\times 1080$ display with a $24\mathrm{in}$ diagonal has $2202.91/24\approx 91.8$ pixels per inch. Its pixel pitch is $25.4/91.8\approx 0.277\mathrm{mm}$. At the same pixel counts, halving the diagonal doubles the linear pixel density and quadruples the number of pixels per unit area. These calculations assume the quoted diagonal is the active image area.

A stored image's pixel counts do not determine its physical size without a display or printing scale. Likewise, a CSS px is a layout unit rather than a promise of one physical display pixel. CSS fixes 96px = 1in within its unit system, but the mapping onto physical display pixels depends on the chosen anchor and device. That ratio cannot be used to infer a screen's measured pixel density.^[ref]

A typographic point is a unit used for font size, line height and other typographic distances. In the modern digital convention,Here the inch is 25.4 millimetres. The equation describes the digital convention; historical typographic point systems have not all used that same length. The modern pt relation also appears among the absolute-length units defined for CSS.^[ref]

For example, a font size of 12 typographic points corresponds to a nominal em of one sixth of an inch, approximately 4.2333 millimetres. That sets the outline's scale, rather than the exact ink height of every glyph. A particular x-height or glyph advance can be a different fraction of an em.

The CSS conversion also gives 12 typographic points as 16 CSS pixels. A CSS pixel is a layout unit, so this equality does not promise 16 hardware pixels or a ruler-measured physical height on every screen. Zoom and the mapping to device pixels must be accounted for separately; the device pixel ratio records one part of that mapping.

Typographic alignment places a line's content relative to its available horizontal space. Common choices align its left edge, align its right edge, centre it or apply text justification. In CSS, text-align specifies alignment within the line's container, rather than positioning the entire container in the page.^[ref]

For a rigid line with natural line width $N\le W$, no indentation, and a left boundary at $x=0$, the starting positions areThus $N=24$ and $W=40$ give starts 0, 8 and 16. These three choices preserve the internal word spacing. Text justification can instead change that spacing through typesetting glue so the content reaches the intended edges. The alignments therefore solve different geometric tasks even when the same words and computer font are used.

A web browser retrieves and presents web resources while providing an environment for interaction with them. For an HTML page, this includes parsing source into a Document Object Model, applying CSS, laying out the result and rendering it. Programs such as JavaScript can then change the document or respond to user actions.^[ref]

Consider a page containing <p id="notice">Waiting</p>. Its visible word begins as Waiting. A program can obtain that element and change its text to Ready; the Document Object Model and displayed page then change without requiring the original response bytes to change. The browser maintains a live document and rendering state, rather than repeatedly displaying an immutable picture of the source.

The visible area also has several coordinate scales. The layout viewport constrains layout, while the visual viewport describes the portion being viewed. Page zoom, pinch zoom and scrolling can change those relationships. This matters when a program places a label relative to a document element or interprets a pointer position.^[ref]

A URL identifies a resource to navigate to; a web search engine helps discover resources. A browser can present search results as a page, but navigating directly to a known address does not require a search query. The retrieval service and the software interpreting its pages remain separate parts of the system.

A word separator is a text unit whose primary role is to separate words. Unicode SPACE U+0020 and non-breaking space U+00A0 are common examples. In CSS, the word-separator classification helps determine where word spacing is applied after white-space processing.^[ref]

Separation and line breaking are related but distinct. In a suitable ordinary text context, a normal space between 10 and kg provides a possible break. Using a non-breaking space there keeps the number and unit together at that boundary. Both characters can still provide visible separation.^[ref]

A language can also write words without visible separators, so a count of space characters is not a universal word-counting method. Text shaping, word spacing and permitted breaks must follow the appropriate text-processing rules. A separator's stored character and the selected glyph advance jointly participate in the geometry.