Create Reusable Colors and Surfaces

CSS can write an opaque color in hexadecimal with six digits: #rrggbb. The three pairs represent red, green, and blue channel values. You only need to recognize the pattern here—no manual number conversion is required.

For example, #1f2937 is a dark blue-gray color. The same color can be written as rgb(31 41 55). In modern rgb() syntax, the three channel values are space-separated and each ranges from 0 to 255.

Text appearance depends on a pair: the foreground color of the text and the background painted immediately behind it. A dark foreground may be readable on a light background but look very different on another background.

An element can inherit color from an ancestor. In contrast, background-color is not inherited. If a paragraph has no painted background of its own, its background is transparent, so you see the painted background of an ancestor behind its text.

A paragraph inside the article inherits the body text color. It does not inherit the article background color; the white article paint simply appears behind the paragraph.

A surface is a visually grouped content area. Each article card coordinates four parts:

• Text color makes content readable.
• background-color paints the card fill.
• A solid border creates a visible edge; its color is the final value in border: width style color.
• border-radius rounds the outer corners.

Padding creates space inside the card, but it does not create the border or rounded shape. The two articles remain ordinary block elements, so they stack in normal document flow.

In your local project folder, create or replace index.html with this page. Both articles use the shared card class. The second article also has the card--featured class, which will be used in a later step.

Save this as index.html.

Now add literal colors and measurements in styles.css. The body supplies the page text color and pale page background. Each .card paints its own white surface, visible solid edge, and rounded corners.

Save both files and refresh index.html in your browser. You should see two white cards with dark text on a pale gray page.

Save this as styles.css, then refresh index.html in your browser.

Repeated literal values make a page harder to update. A custom property stores a reusable CSS value under a name beginning with two hyphens.

Put shared defaults on :root, then use var(...) wherever a normal CSS value belongs. Choose names by role: --color-surface describes the card’s job, unlike a name such as --white, which only describes its current appearance.

Custom-property names are case-sensitive. --color-surface and --Color-Surface are different names.

Replace your entire local styles.css with this complete file, then save and refresh index.html. It preserves the established selectors, typography, and browser-default spacing because it adds no margin rules. The visible page should look the same as it did with literal values; only the way CSS stores the repeated values has changed.

styles.css — complete replacement

A custom property normally inherits. When an element does not supply its own winning value, it can receive the value from its parent.

The second article has both classes: .card and .card--featured. A local override on .card--featured changes --color-surface for that article and for its descendants. It does not change the shared default on :root, the first card, or anything outside the featured card.

Keep the shared default on :root. In styles.css, add this separate rule for the second article. The existing .card rule already consumes --color-surface for background-color, so the featured card uses its local value automatically.

Save the file and refresh your browser. The second card should have a pale indigo surface, while the first card remains white.

styles.css — add this rule after the existing .card rule.

A fallback is the second argument of var(). In these examples, it is used only when the referenced custom property has no defined or inherited value.

If --color-note is missing, the browser uses #595959 here:

var(--color-note, #595959)

The fallback makes this particular reference usable. It does not create --color-note for other declarations.

Use this reference when no --color-note value is defined or inherited.

A custom property can store tokens that are unsuitable for the property where you use it. A fallback is not a type check.

In the isolated example below, 16px is defined, so var() substitutes it. The result is effectively color: 16px, which is invalid at computed-value time. Because the color declaration fails, the note inherits its parent card's text color instead. The fallback is not selected.

Assume the existing page defines --color-text: #1f2937 on :root. This example intentionally uses an invalid value for color.

Contrast has two WCAG AA thresholds

Text needs enough contrast against the background directly behind it.

• Normal text: at least 4.5:1
• Large text: at least 3:1

A contrast ratio belongs to one foreground/background pair. The same text color can pass on one surface and fail on another.

These thresholds assess text contrast. A passing ratio is important, but it does not by itself make an entire interface accessible.

Decide whether text is large

Do not choose a threshold from the HTML element name. A heading is only large text when its rendered size and weight meet a large-text rule.

At regular weight 400, text is large at 24px or more. At bold weight 700, text is large at 18⅔px—approximately 18.67px—or more.

The Study Notes card headings are 24px at weight 400, so they meet the large-text rule. The 16px notes at weight 400 are normal text.

Match each sample with its WCAG AA classification, required threshold, and outcome where a measurement is given.

A contrast checker evaluates a foreground/background pair, not a color in isolation. Inspect each .card__note in your browser’s DevTools to find its computed color, then identify the painted surface immediately behind it.

The two notes can share one computed foreground while sitting on different backgrounds. The Reading plan note sits on the root surface. The Practice plan note sits on the featured card’s locally overridden surface. Check both pairs separately.

Create a real failing state before repairing it. Replace your local styles.css with this complete trial file, save it, and refresh index.html.

Then open a contrast checker in your own browser. Enter each foreground and background pair shown by the rendered page. The notes are still 16px at weight 400, so compare both readings with the normal-text threshold of 4.5:1. A checker evaluates values you enter; it does not inspect this tutorial or your local files.

styles.css — complete failing trial state. Save this file and refresh your local page before measuring both note/surface pairs.

The failure belongs to the shared note-color value, not to the name of the color or a visual guess. Change that responsible custom property from the trial value to the corrected value below. Because both notes consume var(--color-note), saving and refreshing updates both notes.

Re-enter both repaired foreground/background pairs in your own checker. The featured card still needs its own check because its local surface override remains in effect.

styles.css — replace the failing --color-note declaration with this value. Keep the existing .card__note rule that consumes the custom property.

Finish your local Study Notes page using the index.html and styles.css from the previous step.

Keep all shared custom properties on :root. Change the shared card padding to --space-card: 1.5rem, retain --color-note: #595959, and keep .card--featured as the local override for --color-surface: #eef2ff.

Save and refresh. Both cards should gain more inner space because both consume --space-card. Only the Practice plan card should have the pale indigo surface. The Reading plan card remains white.

index.html

styles.css

Compare your saved local files with these blocks after attempting the edits yourself. This stylesheet continues the corrected working state from the previous step: it adds no body padding, card margin, heading-margin reset, interaction state, responsive rule, or animation.