An HTML document links an external stylesheet containing the rule '#main-content p { color: blue; }'. An internal block contains 'article.post p { color: green; }'. Assuming the element is ' Text ', what color is rendered and why?

Blue, because an ID selector carries a specificity vector of [0, 1, 0, 1], which outweighs the class selector's specificity vector of [0, 0, 1, 2].. Specificity is evaluated mathematically by category rather than selector count or stylesheet location. The rule '#main-content p' contains one ID selector and one element selector, yielding a specificity score of [0, 1, 0, 1]. The rule 'article.post p' contains one class selector and two element selectors, yielding [0, 0, 1, 2]. Because the ID tier [0, 1, 0, 0] takes precedence over the class tier [0, 0, 1, 0], the ID-based rule wins, rendering the text blue.

12.1 CSS Syntax, Selectors, and the Cascade

Q: Which of the following CSS properties is automatically inherited by child DOM elements from their parent container without requiring explicit style declarations?

font-family. Textual and typographic properties—such as font-family, font-size, color, and line-height—are naturally inherited by descendant elements down the DOM tree. Box model, spacing, and structural layout properties such as padding, border, margin, width, and background-color do not inherit by default, ensuring that nested containers maintain predictable, isolated layout boundaries.

Key Takeaways

A CSS rule set consists of a selector and a declaration block containing property-value pairs terminated by semicolons.
External stylesheets linked via <link rel="stylesheet"> provide optimal maintainability, enable browser caching across page visits, and enforce separation of presentation from content.
CSS specificity is evaluated using a four-tier vector [Inline, ID, Class/Attribute/Pseudo-class, Element/Pseudo-element], where higher-priority tiers always override lower-priority tiers regardless of quantity.
The !important declaration overrides the standard cascade and specificity calculations, but its indiscriminate use creates fragile stylesheets and debugging bottlenecks.
Typography and color properties naturally inherit down the Document Object Model (DOM) tree, whereas box model and layout properties do not inherit by default.

Last updated: September 2026

12.1 CSS Syntax, Selectors, and the Cascade

In standard web architecture, software concerns are cleanly decoupled across three distinct layers: HyperText Markup Language (HTML) defines semantic structure and information hierarchy, Cascading Style Sheets (CSS) dictates visual presentation and typographic layout, and JavaScript controls behavioral interactivity. Understanding the mechanics of CSS—from individual rule anatomy to the sophisticated algorithmic resolution of the Cascade—is critical for technology educators preparing students to build robust, standards-compliant digital media.

Anatomy of a CSS Rule

A CSS stylesheet is comprised of one or more rulesets (commonly referred to simply as rules). Each ruleset pairs a targeted document pattern with a set of stylistic instructions.

Selector --------->  h1 {
Declaration Block    color: #1e3a5f;        <-- Declaration (Property: Value;)
                     font-size: 2.25rem;    <-- Declaration (Property: Value;)
                     line-height: 1.2;      <-- Declaration (Property: Value;)
                   }

A ruleset contains two core structural components:

Selector: Specifies which HTML element or group of elements within the Document Object Model (DOM) will receive the declared styles (e.g., h1, .lead-paragraph, #main-nav).
Declaration Block: Enclosed within curly braces { ... }, this block contains one or more individual declarations separated by semicolons (;).
- Property: The specific stylistic characteristic being modified (e.g., color, font-size, margin, background-color).
- Value: The explicit setting assigned to the property (e.g., #1e3a5f, 16px, bold, center), separated from the property name by a colon (:).

Omitting the terminating semicolon between declarations causes syntax parsing failures, often resulting in the browser silently discarding the subsequent declaration.

Methods of Applying CSS: Inline, Internal, and External

Styles can be attached to an HTML document through three distinct methodologies, each exhibiting differing operational scopes, specificity weights, and maintenance trade-offs.

1. External Stylesheets (Industry Standard)

External CSS involves authoring rules within dedicated plain-text files ending in the .css extension and linking them into HTML documents via the self-closing <link> element placed inside the <head> section:

<head>
  <meta charset="UTF-8">
  <title>Course Catalog</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

Separation of Concerns: Strictly isolates visual presentation from structural HTML content, aligning with core software engineering best practices.
Browser Caching: Once loaded on an initial page visit, the browser caches the .css file locally. Subsequent visits to other site pages referencing the same stylesheet render almost instantaneously without redundant network round-trips.
Sitewide Maintainability: A single modification to styles.css propagates instantaneously across thousands of interconnected web pages.

2. Internal (Embedded) Stylesheets

Internal styles reside directly within an HTML document, enclosed inside a <style> block situated within the <head> container:

<head>
  <style>
    body {
      background-color: #f8fafc;
      font-family: system-ui, sans-serif;
    }
    .announcement-banner {
      padding: 1rem;
      background-color: #fef3c7;
    }
  </style>
</head>

Utility: Well-suited for single-page standalone documents, email templates, or dynamic content delivery where external network requests must be avoided.
Drawbacks: Increases the byte size of every individual HTML file and cannot be shared across multiple documents, requiring repetitive code duplication.

3. Inline Styles

Inline styles are injected directly onto individual HTML elements via the style attribute:

<p style="color: #dc2626; font-weight: bold; font-size: 1.1rem;">
  Warning: System maintenance begins at midnight.
</p>

Utility: Practical for quick debugging or injecting dynamic style values calculated via JavaScript (such as real-time coordinate positioning).
Severe Drawbacks: Strongly discouraged in modern web design curricula. Inline styles pollute semantic markup, cannot leverage pseudo-classes or media queries, carry an extraordinarily high specificity score that resists stylesheet overrides, and require arduous, line-by-line maintenance.

CSS Selectors, Combinators, and Targeting Patterns

CSS provides an expressive pattern-matching language enabling developers to target elements based on their tag names, attributes, hierarchical relationships, or user interaction states.

Basic Selectors

Universal Selector (*): Matches every single element in the document tree. Often used in layout resets (e.g., * { box-sizing: border-box; }). It carries a specificity weight of zero.
Type (Element) Selector (p, h2, footer): Matches HTML elements matching the specified tag name. Used to establish document-wide typographic baselines.
Class Selector (.highlight, .card-profile): Matches any element whose HTML class attribute contains the specified token (e.g., <div class="card-profile">). Multiple classes can be chained on a single HTML element, and classes can be reused indefinitely across the DOM.
ID Selector (#main-header, #nav-drawer): Matches an element with the corresponding id attribute. In standards-compliant HTML, an ID must remain strictly unique within a single document. ID selectors possess heavy specificity.

Combinators: Expressing Structural Relationships

Combinators describe how selectors relate to one another within the document tree hierarchy:

Descendant Combinator (Space, e.g., article p): Targets any <p> element nested inside an <article>, regardless of how many intermediate structural levels exist (e.g., children, grandchildren, great-grandchildren).
Child Combinator (>, e.g., ul > li): Targets only elements that are direct, immediate children of the parent. Nested sub-lists within deeper structures are not selected unless explicitly targeted.
Adjacent Sibling Combinator (+, e.g., h2 + p): Targets an element that immediately follows another specified element, sharing the exact same parent. Commonly used to format the introductory lead paragraph directly beneath a heading.
General Sibling Combinator (~, e.g., h2 ~ p): Targets all sibling elements matching the second selector that appear anywhere subsequent to the first element under the same parent container.

Pseudo-Classes: Targeting State and Document Structure

A pseudo-class is a keyword preceded by a single colon (:) added to a selector that specifies a special state of the selected elements:

User Action and Link States: Web links transition through distinct interaction states. To function correctly without style conflicts, these pseudo-classes must be declared in strict LVHA order ("LoVe HAte"):
1. :link — Unvisited hyperlinks.
2. :visited — Hyperlinks the user has already visited in browser history.
3. :hover — Element currently hovered over by the user's pointing device.
4. :active — Element during the precise physical click or touch activation.
Form and Interaction States: :focus (element currently receiving keyboard or cursor input), :focus-visible (keyboard focus indicator, vital for accessibility), :disabled, :checked, and :required.
Structural Pseudo-Classes: Target elements based on DOM position without manual classes:
- :first-child and :last-child: Target the absolute first or last child within a parent.
- :nth-child(n): Targets elements using mathematical index formulas. Accepts keywords (odd, even) or linear formulas like :nth-child(2n+1) for zebra-striping table rows.
- :nth-of-type(n): Restricts matching strictly to siblings of the identical HTML tag type.

Pseudo-Elements: Generating Visual Elements and Targeting Sub-Structures

A pseudo-element is preceded by a double colon (::) in CSS3 (though browsers support single colons for legacy backward compatibility) and styles an abstraction of the document tree:

::before and ::after: Inset generated content directly before or after the element's actual DOM content. They mandate the declaration of the content property (e.g., content: "";), widely employed for icons, decorative accents, and clearfix routines without injecting non-semantic HTML nodes.
::first-letter: Styles the initial typographic character of a block element, used to construct classical magazine drop-caps.
::first-line: Formats the first visual line of rendered text dynamically, adjusting automatically as the user resizes the browser window.

The Cascade, Specificity, and Inheritance

The fundamental premise of CSS is the Cascade—the deterministic algorithmic process browsers execute to resolve styling conflicts when multiple declarations target the exact same property on a single element.

[ Conflicting CSS Declarations ]
               |
               v
  1. Origin and Importance  --------> (!important > Author > User > User-Agent)
               |
               v
  2. Specificity Score      --------> ([Inline, ID, Class, Element])
               |
               v
  3. Order of Appearance    --------> (Last declared rule wins)

1. Specificity Calculation Mechanics

When two or more competing rules target the same element with conflicting properties, the browser calculates the specificity score of each selector. Specificity is represented as a four-component vector: [a, b, c, d].

Column a (Inline Styles): Awarded 1 point if the style is applied directly via the HTML style attribute (e.g., style="..."). Otherwise 0.
Column b (ID Selectors): Number of ID selectors in the ruleset (e.g., #nav).
Column c (Classes, Attributes, and Pseudo-classes): Count of class selectors (.active), attribute selectors ([type="text"]), and pseudo-classes (:hover).
Column d (Type Selectors and Pseudo-elements): Count of HTML tag names (div, p) and pseudo-elements (::before).
Note: The universal selector (*) and combinators (+, >, ~) contribute zero to specificity: [0, 0, 0, 0].

Specificity is evaluated from left to right. A selector with [0, 1, 0, 0] (one ID) will completely override a selector with [0, 0, 15, 4] (fifteen classes and four elements). Specificity tiers never "roll over" into higher columns regardless of the number of selectors accumulated.

Selector Example	Inline (a)	ID (b)	Class/Attr/Pseudo (c)	Element/Pseudo-elem (d)	Specificity Vector
`*`	0	0	0	0	`[0, 0, 0, 0]`
`p`	0	0	0	1	`[0, 0, 0, 1]`
`div.alert`	0	0	1	1	`[0, 0, 1, 1]`
`nav.main-nav ul li a:hover`	0	0	2	4	`[0, 0, 2, 4]`
`#sidebar .widget-title`	0	1	1	0	`[0, 1, 1, 0]`
`style="color: red;"`	1	0	0	0	`[1, 0, 0, 0]`

2. The `!important` Declaration: Purpose and Pitfalls

Attaching !important to a property declaration (e.g., color: #ffffff !important;) elevates it out of standard specificity calculations. An author !important rule overrides all other author declarations, including inline styles.

Maintenance Hazard: Overusing !important leads to "specificity wars," wherein developers are forced to append increasingly nested selectors with further !important tags to override previous rules. This destroys stylesheet modularity.
Legitimate Use Cases: Uncompromising utility helper classes (e.g., .hidden { display: none !important; }), or overriding stubborn inline styles injected by third-party JavaScript widgets.

3. Order of Appearance (Source Order)

When competing rules share identical origin, importance, and specificity vectors, the Cascade resolves the tie through source order: the declaration appearing last in the stylesheet (or loaded last by the browser) takes precedence.

4. Property Inheritance

Not all CSS properties cascade downward into child elements:

Inherited Properties: Primarily typographic and textual settings. Children automatically adopt these from their ancestors unless explicitly overridden (e.g., font-family, font-size, color, line-height, letter-spacing, text-align).
Non-Inherited Properties: Box model, background, and positioning attributes do not inherit automatically (e.g., margin, padding, border, width, height, background, position, display). If a parent has a red border, its children do not automatically render red borders.
Explicit Control: The keywords inherit (forces inheritance from parent), initial (resets to browser default), and unset (inherits if property naturally inherits, else resets) allow fine-grained inheritance control.

CSS Selectors and Specificity Scorecard

Selector Classification	Syntax Pattern	Matching Behavior	Specificity Tier
Universal	`*`	Matches every element in the DOM	`[0, 0, 0, 0]`
Type / Element	`article`	Matches all instances of the specified HTML tag	`[0, 0, 0, 1]`
Class	`.callout`	Matches elements possessing the specified class name	`[0, 0, 1, 0]`
Attribute	`[data-status="active"]`	Matches elements possessing the specific attribute and value	`[0, 0, 1, 0]`
Pseudo-class	`:focus`	Matches elements in a dynamic or positional state	`[0, 0, 1, 0]`
ID	`#header-hero`	Matches the unique element bearing the corresponding ID	`[0, 1, 0, 0]`
Inline Style	`style="..."`	Injected directly on an element within HTML markup	`[1, 0, 0, 0]`
Child Combinator	`nav > ul`	Selects `ul` only when it is an immediate child of `nav`	Combined tags
Adjacent Sibling	`h1 + p`	Selects `p` only if it immediately follows `h1`	Combined tags
Pseudo-element	`p::first-letter`	Styles a virtual segment of the matched element	`[0, 0, 0, 1]`

Test Your Knowledge

An HTML document links an external stylesheet containing the rule '#main-content p { color: blue; }'. An internal <style> block contains 'article.post p { color: green; }'. Assuming the element is '<article class="post"><div id="main-content"><p>Text</p></div></article>', what color is rendered and why?

Green, because internal stylesheets declared in the document head always override external stylesheets regardless of specificity.

Blue, because an ID selector carries a specificity vector of [0, 1, 0, 1], which outweighs the class selector's specificity vector of [0, 0, 1, 2].

Green, because 'article.post p' contains more total selector tokens than '#main-content p'.

Blue, because external stylesheets take precedence over internal stylesheets when selectors have equal specificity.

Test Your Knowledge

A web design student wants to style all navigation links so they respond correctly during user interactions. Why must hyperlink pseudo-classes be authored in the specific ':link', ':visited', ':hover', ':active' (LVHA) order?

HTML standards enforce strict syntactic errors that invalidate the stylesheet if the order is violated.

Browsers execute link interactions synchronously, and an out-of-order declaration crashes the JavaScript event thread.

Because these pseudo-classes carry identical specificity, subsequent declarations cascade over previous ones when multiple states apply simultaneously.

The ':active' pseudo-class has higher inherent specificity than ':hover', requiring it to be placed last to prevent inheritance loops.

Test Your Knowledge

Which of the following CSS properties is automatically inherited by child DOM elements from their parent container without requiring explicit style declarations?

font-family

padding

border

background-color

Up Next

12.2 The CSS Box Model and Visual Formatting

Continue learning

TExES Technology Applications EC-12 (242)

12.1 CSS Syntax, Selectors, and the Cascade

Key Takeaways

12.1 CSS Syntax, Selectors, and the Cascade

Anatomy of a CSS Rule

Methods of Applying CSS: Inline, Internal, and External

1. External Stylesheets (Industry Standard)

2. Internal (Embedded) Stylesheets

3. Inline Styles

CSS Selectors, Combinators, and Targeting Patterns

Basic Selectors

Combinators: Expressing Structural Relationships

Pseudo-Classes: Targeting State and Document Structure

Pseudo-Elements: Generating Visual Elements and Targeting Sub-Structures

The Cascade, Specificity, and Inheritance

1. Specificity Calculation Mechanics

2. The !important Declaration: Purpose and Pitfalls

3. Order of Appearance (Source Order)

4. Property Inheritance

CSS Selectors and Specificity Scorecard

2. The `!important` Declaration: Purpose and Pitfalls