Chapter 12 taught you how CSS selects elements and how the cascade decides which rule wins when several rules apply. Now you have selectors that reliably reach the right elements. Chapter 13 teaches you what to do once you get there: how to control color, typography, spacing, and borders in ways that make pages readable, clear, and visually organized.

These are the foundational visual properties of CSS. Every page you build will use them. Every layout problem you encounter later — in Flexbox, in Grid, in responsive design — will assume you already understand how margins, padding, borders, and typography behave. Getting comfortable with these properties now will make everything that follows easier.

This chapter also introduces a distinction that runs through all of CSS: the difference between properties that affect how an element looks and properties that affect how much space it occupies. Typography mostly affects appearance. Spacing affects layout. Borders affect both. Learning to tell these apart will help you read CSS more clearly and debug it more effectively.

Before learning individual CSS properties, it helps to understand what those properties are for. Visual design in web development is not decoration applied after the content is ready. It is the craft of making content readable, navigable, and usable.

Every property in this chapter is a tool for one of four goals. Keep these in mind as you read — they explain why a property exists, not just what it does.

CSS provides several ways to specify color. Each format describes the same set of colors but expresses them differently. You will see all of these in real CSS, so you need to be able to read and write all of them.

CSS recognizes a set of named colors written as plain words. CSS has 140 named colors, including common ones like red, blue, and gray, and less common ones like rebeccapurple and papayawhip. Named colors are easy to read and useful for quick experiments, but they are too limited and imprecise for serious design work.

Hexadecimal values, usually called hex values, are the most common color format in web CSS. A hex value begins with # followed by six characters — three pairs for red, green, and blue. Each character is a digit from 0–9 or a letter from A–F. 00 means none of that channel; ff means the maximum.

When both characters in each pair match, you can shorten the value to three characters: #ffffff becomes #fff, and #444444 becomes #444. This shorthand is common in real stylesheets.

RGB values express color as three numbers — red, green, and blue — each ranging from 0 to 255. RGB is mathematically identical to hex; rgb(255, 0, 0) is the same color as #ff0000.

The rgba() format adds a fourth value, the alpha channel, ranging from 0 (fully transparent) to 1 (fully opaque). This is frequently used for overlays, shadows, and subtle background tints.

HSL stands for Hue, Saturation, and Lightness — a way to describe color that many designers find more intuitive. Hue is an angle on a color wheel from 0 to 360 (0 and 360 are both red; 120 is green; 240 is blue). Saturation runs from 0% (gray) to 100% (vivid). Lightness runs from 0% (black) to 100% (white), with 50% giving the purest version of the color.

HSL makes it easy to create color variations: increase lightness for a lighter version, decrease saturation for a more muted one. Like RGB, HSL has an alpha variant: hsla(207, 90%, 54%, 0.8).

The two most fundamental color properties are color and background-color. color sets the foreground color of an element — for text elements, the color of the text itself, including text decorations such as underlines. background-color sets the background color of the element's box. By default, element backgrounds are transparent, so the parent's background shows through.

The color property is inherited. If you set color on body, all text inside the page inherits that color unless a more specific rule overrides it. This is why setting color and background-color on body is a common, efficient pattern for establishing base page colors.

background-color is not inherited. Child elements default to a transparent background, allowing the parent's background to show through. If you want a child element to have a different background, you must set it explicitly.

Color contrast is a critical accessibility requirement, not a design preference. When text lacks sufficient contrast against its background, many users cannot read it — including users with low vision, older users, users in bright sunlight, and users on lower-quality screens.

The first rule places light gray text on a light gray background — the contrast ratio is far too low for comfortable reading. The second places dark gray text on white, providing strong contrast. Bright color combinations can fail contrast checks too: bright yellow text on white looks vivid but is extremely difficult to read. Always check your contrast ratio with a tool before finalizing a color scheme.

The font-family property controls which typeface is used for text. On the web, fonts work differently than in a word processor: the browser renders text using fonts installed on the user's operating system, or fonts downloaded from a web font service.

Because you cannot guarantee which fonts a user has installed, font-family accepts a comma-separated list of font names called a font stack. The browser uses the first font in the list that it can find.

The last value in a font stack should always be a generic family name: serif, sans-serif, monospace, cursive, or fantasy. These are keywords, not specific fonts — they tell the browser which category to fall back to if none of the named fonts are available. Serif fonts have small decorative strokes at the ends of letterforms (Georgia, Times New Roman). Sans-serif fonts have none and tend to look cleaner on screens (Helvetica, Arial). Monospace fonts give every character equal width, which matters for code and terminals.

Modern CSS often uses a system font stack that tells the browser to use the operating system's default interface font, avoiding slow font loading and providing a native appearance.

Each entry is a fallback for a specific operating system: macOS uses San Francisco, Windows uses Segoe UI, Android uses Roboto, Linux uses Ubuntu or Cantarell. If none are found, the browser falls back to a generic sans-serif. System font stacks are widely used where fast loading and native appearance matter more than a specific designed typeface.

Web fonts are font files loaded from a server — your own, or a service such as Google Fonts. Web fonts give you access to any typeface, but add a network request and a small loading cost.

The font-size property controls how large text appears. Font size can be specified in several units — most commonly pixels (px), em, and rem.

Pixels are absolute units. font-size: 16px means the text renders at 16 pixels tall. The typical base size for body text is 16px — the browser default for most elements and a comfortable reading size on most screens. Going below 14px makes reading uncomfortable for many users.

The em unit is relative to the current element's font size. If body font size is 16px, 1em is 16px and 1.5em is 24px. The problem with em is that nested elements compound: a list item inside a container that already has a reduced font size inherits that smaller size, and then em values calculate relative to it again, producing unexpected results.

rem stands for root em. It is relative to the font size of the root <html> element, not the current element. Because rem always refers to the same base size, it does not compound through nesting.

Line height controls the vertical space between lines of text within a paragraph, using the line-height property. Adequate line height dramatically improves readability, especially for longer passages.

Notice that line-height is set without a unit. A unitless value is a multiplier based on the current font size — line-height: 1.6 means the line height is 1.6 times the font size (25.6px on 16px text). Using a unitless multiplier is recommended because it scales proportionally when font size changes; a fixed pixel value will not scale correctly when the font size differs.

This is a widely used pattern: generous line height for readability in body text, and tighter line height for headings, where extra space between lines feels excessive at large sizes.

Font weight controls how thick or thin letterforms appear. The font-weight property accepts keyword values (normal, bold) and numeric values from 100 to 900 in increments of 100. normal is equivalent to 400 and bold is equivalent to 700.

The text-align property controls the horizontal alignment of text within its container: left, right, center, and justify.

Left alignment is the default in left-to-right languages and is the easiest text to read for most users. Center alignment suits short headings and hero text. Right alignment is useful in tables for numbers and prices. Justify stretches text so both edges align, which can help printed documents but often creates uneven spacing on screens, especially in narrow containers — use it sparingly. For body text in a left-to-right language, text-align: left is almost always the right choice for readability.

The text-decoration property controls underlines, overlines, and strikethroughs.

Margins and padding are both spacing properties, but they act in different places. Understanding this distinction is fundamental to CSS layout.

padding: 16px applies 16px of internal space to all four sides. padding: 4px 8px applies the first value (4px) to top and bottom and the second value (8px) to left and right.

Individual sides can be set with margin-top, margin-right, margin-bottom, and margin-left — the preferred approach when you only want to control spacing on specific sides. A very common pattern is resetting paragraph top margin to zero and controlling spacing entirely through bottom margin, producing predictable, consistent vertical rhythm down the page.

One special and important use of margin is centering a block element horizontally. Setting margin-left: auto and margin-right: auto on a block element with a defined width centers it within its container.

Borders draw a visible line around the outside of an element's padding area. The border shorthand property accepts three values: width, style, and color.

You can set borders on individual sides using border-top, border-right, border-bottom, and border-left.

A bottom border under a heading is a common way to create visual separation. A left border combined with left padding creates an indented callout style widely used for quotations and notices.

The border-radius property rounds the corners of an element's border box.

border-radius: 8px rounds all four corners by 8 pixels. border-radius: 50% creates a perfect circle on an element with equal width and height. border-radius: 999px creates a fully rounded pill shape on a wide rectangle — a common technique for badges and buttons.

Here, an input field has a gray border by default; on focus, the border color changes to blue. Because both states define a 1px solid border, the layout does not shift when focus activates — only the color changes.

Visual hierarchy is the arrangement of elements so their visual weight reflects their importance. Users scan pages before reading them. Visual hierarchy guides the eye, signals what matters most, and makes pages easier to navigate. CSS controls hierarchy through the properties you have learned in this chapter: size, weight, color, contrast, spacing, and borders.

Together, these rules create a clear visual hierarchy without any complex layout, shadows, or decorative elements. Hierarchy is a product of disciplined, consistent decisions — not visual flourishes.

This section walks through a complete, working example of foundational styles applied to a real HTML page. Study each rule carefully. Notice how typography, color, spacing, and borders work together.

Build a complete readable article page applying everything from this chapter.