CSS Visual Design & Layout
Start by linking one plain-text stylesheet to the HTML site you already built, then progress through the cascade, sizing, readable typography, Flexbox, Grid, responsive components, accessible states, positioning, selectors, motion, print, debugging, and one complete design system.
The cascade, selectors, and inheritance
Objective Link a stylesheet, write and change CSS rules, and explain why one declared value appears on the page.
Core explanation
CSS, or Cascading Style Sheets, is plain text that describes how matching HTML elements should be presented. A rule contains a selector followed by a declaration block in braces. The selector identifies elements; each declaration contains a property, a colon, a value, and usually a semicolon. Create styles.css beside index.html, add `<link rel="stylesheet" href="styles.css">` inside the HTML head, enter the complete example, save both files, and reload the page. The body selector matches the body element, h1 matches the page heading, and `.notice` matches any element whose class attribute contains notice; this chapter introduces the class attribute rather than assuming it. The cascade is the browser’s method for choosing among declarations that set the same property on the same element. Start with three decisions: a declaration must match, a more specific selector normally outranks a less specific selector in the same author context, and equally specific later rules outrank earlier ones. Some properties such as color inherit from a parent when the child has no winning value, while properties such as margin do not. Later sections add origins, importance, layers, and scoping only after this first observable rule is secure.
Link one stylesheet and prove that the browser loaded it
CSS means Cascading Style Sheets. It is plain text that describes presentation while HTML continues to own the page’s meaning and structure. In the copied HTML capstone folder, create styles.css beside index.html. Add `<link rel="stylesheet" href="styles.css">` inside the HTML head. rel states that the referenced resource is a stylesheet, and the relative href points from index.html to the file in the same folder.
Enter the complete CSS example, save both files, and reload index.html. Predict three observations before reloading: the page uses the named system-font fallback list, h1 is blue, and the element whose class contains notice gains a pale background, border, and padding. If none appears, do not add stronger selectors. Verify that the file is exactly styles.css rather than styles.css.txt, that the href has the same spelling and capitalization, that both files were saved, and that the browser opened this folder’s index.html.
Read a CSS rule as selector plus declarations
A rule has a selector followed by a declaration block inside braces. A selector states which elements may receive the declarations. Each declaration has a property name, a colon, a value, and normally a semicolon. In `h1 { color: #1457d9; }`, h1 is the selector, color is the property, and #1457d9 is the value. The complete property-value pair is one declaration. Whitespace and line breaks help people read the rule but do not change this relationship.
An element selector such as h1 matches elements by tag name. A class is a space-separated label stored in an HTML class attribute; `.notice` is a class selector that matches `<p class="notice">`. The dot belongs to the CSS selector but not to the HTML attribute value. A selector may match zero, one, or many elements. A correct rule that matches nothing produces no visible change, so matching is the first question before precedence.
Build the first cascade model before adding advanced precedence
The cascade is the browser’s decision process when several declarations apply to the same property on the same element. First discard declarations whose selector does not match or whose condition is inactive. Within ordinary author rules, an ID selector is more specific than a class or attribute selector, which is more specific than an element selector. If competing selectors have equal specificity, the declaration later in source order wins. This simplified model explains the first controlled examples; origin, importance, layers, scopes, and animation precedence extend it later in the chapter.
Inheritance is a related but different process. If an element has no winning declared value for an inherited property such as color or font-family, it can receive the parent’s computed value. Layout properties such as margin, padding, border, width, and display do not inherit by default. A child h1 can therefore inherit body’s font-family while using its own winning color. Do not assume that “the parent has a value” means every child property copies it.
Diagnose one missing or losing rule from visible evidence first
Change only the h1 color value from #1457d9 to #8a2be2, save, and reload. The heading becomes purple while the notice background and border remain unchanged. Restore the original value. Next change the HTML class from notice to notices without changing CSS. Predict that only the class-based notice presentation disappears, observe it, then restore the exact class. This mutation distinguishes a selector mismatch from a broken stylesheet link.
When visual evidence cannot explain a conflict, the browser’s built-in developer tools can provide optional confirmation without a separate installation. Open the inspector, select the element, and find the Styles or Rules panel; it lists matching declarations, crossed-out losing declarations, and the source file. The Computed panel shows the final property value. This chapter teaches those panels here rather than requiring prior experience, but the file, selector, source-order, and visible-change method remains sufficient for all required opening work.