CSS Colors, Backgrounds and Typography: Color Notations, Font Stacks, Units and Inherited Text Styles

How color, backgrounds, and typography actually work in CSS

In CSS you control appearance through a small set of properties — color, background, font-family, font-size, and line-height — fed by a handful of value notations (named colors, hex, rgb(), hsl()) and units that are either absolute like px or relative like em, rem, and %. What ties them together is inheritance: text-related properties flow down to descendant elements automatically, while box-related properties such as background-color, border, and padding do not.

Four ways to write a color

A named keyword (navy, rebeccapurple) is the simplest. Hex notation is case-insensitive and comes in four lengths. #ff0099 is red-green-blue; the three-digit #f09 is shorthand where each digit is duplicated (f becomes ff); and the four- and eight-digit forms add an alpha channel, so #f09a expands to #ff0099aa. In the eight-digit form the alpha byte runs from 00 (fully transparent) to ff (fully opaque). The functional forms rgb() and hsl() accept modern space-separated values with alpha after a slash: rgb(255 0 153 / 80%) or hsl(150 30% 60% / 0.8). The older comma forms rgba() and hsla() remain valid — in current CSS they are simply aliases of rgb() and hsl(). Finally, two keywords earn their keep: transparent, and currentcolor, which resolves to the element's own computed color value.

Backgrounds paint the box, not the text

The background shorthand sets eight longhands: background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-color. Anything you omit is reset to its initial value — background-image: none, background-repeat: repeat, background-color: transparent, and so on. That reset is the single most common source of "my image disappeared." Note also that background-size may only appear immediately after background-position, separated by a slash: background: url("hero.jpg") center/cover no-repeat;

Font stacks and units

font-family takes a prioritized, comma-separated list, and the browser works left to right until it finds a family it can use. Each entry is either a quoted string or a sequence of unquoted identifiers, so "Times New Roman" and Times New Roman are both technically legal — but quoting is the recommended form, and it becomes mandatory once a token starts with a digit or contains punctuation ("Goudy Bookletter 1911" must be quoted; unquoted it is invalid). Generic families are the opposite case: serif, sans-serif, monospace, cursive, fantasy, and system-ui are keywords and must never be quoted. Always end the list with one of them.

For sizing, em means "relative to the parent's computed font size" when used on font-size itself, but "relative to this element's own computed font size" on every other property, including padding, margin, and width. rem is always relative to the root element, which makes it predictable no matter how deeply an element is nested.

The cascade of inherited text styles

color, font-family, font-size, font-weight, line-height, letter-spacing, text-align, and visibility are inherited by default. background-color, border, padding, margin, and display are not. You can override either direction with the global keywords inherit, initial, unset, and revert. Set your typography once on html or body and let it flow down — that is the whole point of an inherited cascade. For the full topic map, see the WGU D276 Web Development Foundations study guide.

A worked example

Here is a small, realistic block. Read it and predict what each element looks like before you read the explanation underneath.

html { font-size: 16px; }
body {
  color: #1c2b3a;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  background: #f7f9fb url("paper.png") repeat;
}
.card {
  font-size: 1.25rem;
  padding: 1em;
  background-color: rgb(255 255 255 / 90%);
  border: 1px solid;
}
.card h3 { font-size: 2em; }

The .card font size is 20px — 1.25 × the root's 16px, because rem ignores the parent entirely. Its padding is 20px, because em on padding uses the element's own computed 20px. Its border is #1c2b3a: the inherited color resolving through currentcolor, which is the initial value of border-color. The h3 is 40px — 2 × the parent's 20px, because em on font-size does use the parent — and its line height is 64px, or 1.6 × 40px, since the unitless number was inherited as a number rather than as a frozen length.

Mistakes people actually make

• Expecting links to inherit color. Setting color on body will not recolor an <a href="...">, because the browser's own stylesheet sets a color on linked anchors, and any declaration beats inheritance. Style a explicitly. An <a> with no href is not matched by those rules and does inherit normally.
• Expecting form controls to inherit fonts. <input>, <select>, and <button> are the same story — the user agent stylesheet sets a font on them. Add font: inherit; to pull them into your type system.
• Compounding em. Nest three lists that each set font-size: 0.9em and the third level lands at 0.729 of the original. Use rem when you want a fixed step instead of a compounding one.
• Assuming backgrounds inherit. They do not. A child only looks like it shares its parent's background because the child's own background-color is transparent, letting the parent show through.
• Slash placement in the shorthand. background: url("a.jpg") cover; is invalid — a size must follow a position and a slash, as in center/cover.
• Over- or under-quoting font names. Multi-word family names may legally be written unquoted as a sequence of identifiers, but quote them anyway: it is required the moment a token starts with a digit or contains punctuation, and it never hurts. Generic keywords are the exception that must stay bare.

How to reason about the tricky cases

When a computed value surprises you, ask two questions in order. First: is this property inherited? If it is not, the child is using its own initial value, not the parent's. Second: what is the relative unit measured against? Percentages and em resolve against different references depending on the property, and once a relative value has computed to a length, that length is what descendants receive. Verify against the "Formal definition" table on any MDN property page, which states plainly whether the property inherits and what its initial and computed values are. Then put it into practice with the D276 practice questions.