🚧 Under construction — VoTechWorks is being built. A free tech program — complimentary, as our commitment to get America working.
voTechWorksGrade 13 · a vocational technology learning center, by urbanicity
newSchoolWorks.com › VoTechWorks › Technology & Design › Web & Software Development › HTML, CSS, and JavaScript for Web Development › Lesson 4
TEC-WEB46-02 · Lesson 4 · 15 clock hours · demo

CSS Fundamentals: Selectors, the Box Model, and Cascade

Objective. Students apply CSS rules using element, class, ID, descendant, and pseudo-class selectors, explain how specificity and cascade order resolve conflicts, and use the box model properties to control spacing and size.

⚠ Pending professional review

This lesson, its worked examples and its practice questions has not yet been verified by an industry-certified professional or by a certification or approval body. It is a study draft and may contain errors. Do not use it as instructions for work on a job site or on live equipment. Always follow your instructor, your supervising professional, and current official references and regulations.

VoTechWorks program approval and accreditation are still in progress. Credentials are issued only by the certifying bodies named in each program, after their own exams.

What CSS Does and How It Gets Applied

Cascading Style Sheets (CSS) tell the browser how HTML elements should look — their color, size, spacing, and layout. A CSS rule consists of a selector that targets one or more elements and a declaration block containing property–value pairs. For example:

```css

p {

color: #333333;

font-size: 1rem;

}

```

The selector `p` targets every paragraph element. Each declaration ends with a semicolon. Understanding which rules win when several rules compete is the core skill this lesson develops.

Selectors

Element selectors target every instance of an HTML tag: `h1`, `p`, `section`.

Class selectors begin with a dot and target elements carrying that class attribute: `.card`, `.btn-primary`. One element can have many classes; one class can be shared by many elements.

ID selectors begin with a hash and target a single unique element: `#main-nav`. IDs must be unique within a page. Because of their high specificity, prefer classes for styling; reserve IDs for JavaScript hooks or anchor links.

Descendant selectors combine two selectors with a space: `nav a` targets every `<a>` that lives anywhere inside a `<nav>`, no matter how deeply nested.

Pseudo-class selectors match elements in a particular state. Common examples:

Always include `:focus` styles alongside `:hover` styles. Keyboard-only users depend on visible focus indicators, and omitting them is an accessibility failure.

Specificity

When two rules target the same element and set the same property, the browser uses specificity to decide which wins. Specificity is calculated as three weighted categories:

| Category | What counts | Weight (informal) |

|---|---|---|

| A | Inline styles (style attribute) | Highest |

| B | ID selectors | High |

| C | Class, pseudo-class, attribute selectors | Medium |

| D | Element and pseudo-element selectors | Low |

A useful shorthand: count IDs, classes, and elements as a three-part score (ID, Class, Element). `nav a` scores (0, 0, 2). `.card a` scores (0, 1, 1). `.card a` wins because its class column is higher. If specificity is equal, the rule that appears later in the source wins — that is the cascade order rule.

The keyword `!important` overrides normal specificity entirely. Treat it as a last resort; overusing it makes debugging very difficult.

The Cascade: Four Layers

The browser resolves style conflicts in this order (later steps override earlier ones):

1. Browser default styles (user agent stylesheet)

2. External or linked stylesheets

3. Embedded `<style>` blocks in the HTML

4. Inline `style` attributes on individual elements

Within any single layer, specificity decides; if specificity ties, source order decides.

The Box Model

Every HTML element is rendered as a rectangular box. From the inside out, the box model has four layers:

1. Content — the actual text or image area; sized by `width` and `height`.

2. Padding — transparent space between the content and the border; inherits the background color of the element.

3. Border — a line (or none) surrounding the padding; set with `border-width`, `border-style`, and `border-color`, or the shorthand `border`.

4. Margin — transparent space outside the border that separates the element from neighbors; never takes the background color.

By default, browsers use `box-sizing: content-box`, which means `width` applies only to the content area and padding plus border are added on top. Setting `box-sizing: border-box` makes `width` include padding and border, which is generally easier to work with. Many teams apply it globally:

```css

, ::before, *::after {

box-sizing: border-box;

}

```

Using DevTools to Inspect the Box Model

In Chrome, right-click any element and choose Inspect. The Elements panel shows the HTML; the Styles panel on the right shows which CSS rules apply and which are overridden (struck through). Switch to the Computed panel to see the final resolved value for every property, including a visual box model diagram showing exact pixel values for margin, border, padding, and content. Use the computed panel to verify your predictions during the specificity walkthrough and to measure elements during the box model lab.

Accessibility and Safety Reminders

Key terms9

SelectorThe part of a CSS rule that identifies which HTML elements the declarations apply to; examples include element, class, ID, descendant, and pseudo-class selectors.
SpecificityA scoring system the browser uses to decide which CSS rule wins when two or more rules target the same element and property; calculated by counting ID, class, and element components of a selector.
CascadeThe algorithm that determines the final value of a CSS property by considering the origin of a stylesheet, specificity, and source order.
Box ModelThe rectangular layout model in which every HTML element consists of a content area surrounded by padding, border, and margin, from inside to outside.
Pseudo-classA keyword added to a selector with a colon that matches an element in a specific state, such as :hover, :focus, or :nth-child().
box-sizing: border-boxA CSS property value that causes the declared width and height of an element to include its padding and border, making layout calculations more predictable.
Computed panelThe tab in browser DevTools that shows the final resolved value of every CSS property on a selected element after all cascade and inheritance rules have been applied.
Descendant selectorA CSS selector written as two selectors separated by a space (e.g., nav a) that targets elements matching the second selector only when they appear inside an element matching the first.
!importantA CSS declaration flag that forces a rule to override normal specificity calculations; should be used sparingly because it makes cascade conflicts harder to debug.

Worked examples4

1. Three CSS rules target the same <h2> element. Determine which color is applied. Rule 1 (element selector): h2 { color: gray; } Rule 2 (class selector): .title { color: blue; } Rule 3 (ID selector): #main-heading { color: red; } The element has: <h2 class="title" id="main-heading">
  1. Count the specificity of Rule 1 (h2): 0 IDs, 0 classes, 1 element → score (0, 0, 1).
  2. Count the specificity of Rule 2 (.title): 0 IDs, 1 class, 0 elements → score (0, 1, 0).
  3. Count the specificity of Rule 3 (#main-heading): 1 ID, 0 classes, 0 elements → score (1, 0, 0).
  4. Compare scores left to right (ID column first): Rule 3 has 1 in the ID column; Rules 1 and 2 have 0. Rule 3 wins outright.
  5. The applied color is red.
Answer: color: red — the ID selector (#main-heading) has the highest specificity score of (1, 0, 0).
2. Two rules have equal specificity. Which color wins? Rule A (appears first in the file): .btn { color: green; } Rule B (appears second in the file): .btn { color: orange; } The element is: <button class="btn">
  1. Both selectors are single class selectors: specificity score (0, 1, 0) for both.
  2. Specificity is equal, so cascade order (source order) decides.
  3. Rule B appears later in the stylesheet, so it overrides Rule A.
  4. The applied color is orange.
Answer: color: orange — when specificity ties, the rule that appears later in the source wins.
3. An element has the following CSS applied (box-sizing: border-box). Calculate the total space the element occupies horizontally. width: 200px; padding-left: 20px; padding-right: 20px; border-left: 5px solid black; border-right: 5px solid black; margin-left: 10px; margin-right: 10px;
  1. Because box-sizing is border-box, the declared width (200px) already includes padding and border.
  2. Content width = 200px − 20px (padding-left) − 20px (padding-right) − 5px (border-left) − 5px (border-right) = 150px.
  3. The border box (the rendered width on screen, excluding margin) equals the declared width: 200px.
  4. Margins are outside the border box and add to the total space occupied: 200px + 10px (margin-left) + 10px (margin-right) = 220px total horizontal space.
Answer: The element occupies 220px of horizontal space (200px border box + 10px left margin + 10px right margin). Its content area is 150px wide.
4. A descendant selector and an element selector both set font-size on the same <p>. Which wins? Rule X: p { font-size: 14px; } /* specificity: (0,0,1) */ Rule Y: article p { font-size: 18px; } /* specificity: (0,0,2) */ The <p> is inside an <article>.
  1. Rule X selector 'p' has 0 IDs, 0 classes, 1 element → (0, 0, 1).
  2. Rule Y selector 'article p' has 0 IDs, 0 classes, 2 elements → (0, 0, 2).
  3. Compare in the element column: Rule Y scores 2, Rule X scores 1. Rule Y wins.
  4. The <p> inside an <article> renders at font-size: 18px.
Answer: font-size: 18px — the descendant selector 'article p' has a higher specificity score (0,0,2) than the plain element selector 'p' (0,0,1).
In class: Instructor-led specificity walkthrough: students predict the computed color of a series of elements given overlapping rules, then verify predictions in browser DevTools Computed panel. · Box model measurement lab: students open a provided HTML page, use DevTools to measure margin, border, padding, and content dimensions of six targeted elements, record values in a worksheet, then write CSS to match a provided wireframe diagram. · Cascade conflict debugging drill: students are given a broken CSS file with seven specificity conflicts; they must identify each conflict, explain why it occurs in a comment, and fix it so the page matches the reference screenshot.
Materials: VS Code, Chrome DevTools, MDN CSS Cascade and Inheritance reference, provided HTML page and broken CSS file, wireframe diagram handout
Check: Debugging drill submitted file assessed against reference screenshot in DevTools; all seven conflicts resolved correctly scores 100%; pass mark 6 of 7 conflicts (approximately 85%) resolved correctly with accurate comments.

Practice check8

Answer each question, then check it. Nothing is recorded; this is your own practice.

CompTIA ITF+ — IT Concepts and Terminology
1. A developer writes `.nav a:hover { color: white; }`. Which type of selector is `:hover` in this rule?
CompTIA ITF+ — IT Concepts and Terminology
2. Given these two rules targeting the same `<p>` element, which declaration wins and why? Rule 1: `p { color: black; }` Rule 2: `#intro p { color: navy; }`
CompTIA ITF+ — IT Concepts and Terminology
3. In the CSS box model, which layer directly surrounds the content area and shares the element's background color?
CompTIA ITF+ — IT Concepts and Terminology
4. A student sets `width: 300px` on a `<div>` and then adds `padding: 20px` and `border: 5px solid`. When inspecting in DevTools, the total rendered width of the border box is 350px. Which `box-sizing` value is in effect?
CompTIA ITF+ — IT Concepts and Terminology
5. A developer removes the `:focus` outline from all buttons with `button:focus { outline: none; }` and provides no replacement focus style. What is the primary concern?
CompTIA ITF+ — IT Concepts and Terminology
6. Which CSS selector targets only `<a>` elements that are direct or deeply nested descendants of a `<footer>` element?
CompTIA ITF+ — IT Concepts and Terminology
7. In the CSS cascade, which source of styles has the highest priority under normal (non-!important) conditions?
CompTIA ITF+ — IT Concepts and Terminology
8. A student needs to calculate the specificity of the selector `#sidebar .widget li:first-child`. What is the correct specificity score expressed as (IDs, Classes/Pseudo-classes, Elements)?
Record this lesson on my transcript. Sign in with your key and enrollment email to record lessons (enroll free if you have no key). This page stays open to read and practise.
← Previous lessonProgram planNext lesson →