CSS Basics

HTML describes content and meaning. CSS, short for Cascading Style Sheets, describes presentation: colors, fonts, spacing, borders and backgrounds. Changing a stylesheet can give the same HTML a different appearance without changing its headings, paragraphs or links.

Read a rule

p {
  color: navy;
  font-size: 18px;
}

The selector p matches paragraphs. The curly braces enclose the declaration block. Each declaration has a property, a colon, a value and a semicolon. Here, color and font-size are properties; navy and 18px are values. Line breaks and spaces between these parts make the code easier to read without changing its effect.

A semicolon separates one declaration from the next. The last one is optional, but keeping it prevents mistakes when you add another line. In color: navy font-size: 18px;, the browser reads one invalid color value. It cannot recover the two declarations you intended, so neither style is set by that text.

Connect the CSS

An external stylesheet is a separate CSS file linked from the HTML head:

<link rel="stylesheet" href="css/styles.css">

This path means that a folder named css sits next to the HTML file and contains styles.css. One external file can style several pages. Saving a change there updates the rules those pages load.

A style element in the head holds rules for one page. An inline style attribute holds declarations for one element, such as <p style="color: crimson;">Hello.</p>. External stylesheets are usually easier to maintain. Normal inline declarations also outrank normal author stylesheet rules, which can make later changes awkward.

For a first result, put body { font-family: Arial, sans-serif; } and h1 { color: darkslateblue; } in the linked file. Reload the page. Body text takes Arial where available, with a sans-serif fallback; the heading changes color. Controls such as buttons can retain their own browser font until you explicitly make it inherit.

Find syntax and path mistakes

Browsers skip invalid declarations and continue. color: 12px; is invalid because a length is not a color. font-size: 16 px; is invalid because the number and unit must touch. A misspelled property is ignored too. A valid border declaration in the same block can still work, so one visible change does not prove every declaration is valid.

CSS comments use /* Header styles */ and can span lines. // does not start a CSS comment; it can cause following code to be skipped. Property names and ordinary keyword values are case-insensitive; keep them lowercase by convention. Class names and file paths must match their actual spelling and capitalization.

If no styles appear, check the request in the Network panel. A wrong path such as style.css can return 404 even though the HTML page itself opens normally.

Treat shorthands as complete settings

A shorthand sets several related properties at once. margin: 10px 20px; sets all four margins. Omitted parts return to their initial values: background-image: url("sky.jpg"); followed by background: lightblue; removes the image. Put a shorthand first, then any longhand exceptions that should survive.

A plain HTML page still has large headings, paragraph spacing, list markers and underlined links. These come from the user-agent stylesheet, the browser's built-in CSS. Your styles begin from these defaults; an unstyled page is not a page without CSS rules.

Choose meaning before appearance

Typical defaults include an 8px body margin, 1em vertical paragraph margins, and 40px start padding on lists. Heading defaults include 2em for h1 and 1.5em for h2, with h1 vertical margins of 0.67em. Strong text is bold; emphasized text is italic. Unvisited links are usually blue and visited links purple. Browser settings and implementations can affect defaults, so inspect the actual page when precision matters.

The default text size is commonly 16px, with a font chosen in browser settings. Readers can change that size. Relative font sizes can follow their choice.

Choose an HTML element for its meaning, then style it. If an h2 looks too large, use h2 { font-size: 1.25rem; }. Choosing an h4 solely for smaller type would change the heading structure. Changing the CSS size leaves the second-level heading's meaning intact.

Defaults also determine how elements occupy space. Paragraphs and sections normally form block boxes. Spans and links normally flow inside lines. List items have display: list-item, giving them a block-level box and a marker. A CSS display change alters the box behavior while preserving the element's HTML meaning.

Reset only what you intend

A reset removes selected defaults. body { margin: 0; } removes the outer gap. A broad rule such as * { margin: 0; padding: 0; } also removes paragraph spacing and list indentation, which you then need to rebuild. A normalize approach keeps useful defaults and adjusts inconsistencies.

Form controls often have directly assigned browser fonts. To make them match the page, write:

button, input, select, textarea {
  font: inherit;
}

Start the HTML document with <!DOCTYPE html>. It selects standards mode. Omitting the doctype can trigger quirks mode, where older compatibility behavior changes some sizing and other CSS results.

Inspect the property that surprises you

Right-click an element and choose Inspect. The Styles panel shows matching rules, including browser rules labeled as user-agent styles. A crossed-out declaration lost to another declaration; a warning can mark invalid CSS. Winners are chosen property by property, so a rule can lose its color while still supplying its padding.

The Computed panel shows final property values and the box model's content, padding, border and margin. If a heading has an unexpected gap, inspect its margin before adding padding to a different element. Test a change directly in developer tools, then copy the working rule to your stylesheet: inspection edits disappear on reload.

When a style fails, follow a useful order: check that the stylesheet loaded, that the selector matches, that the declaration is valid, that it wins, and that the property affects this kind of box. A valid width: 200px still does not size an ordinary inline span.

A selector answers a practical question: which elements should receive these declarations? Start with the simplest match that expresses the role you want. A class can be reused across many elements without tying the style to one location on the page.

Match names and attributes

A type selector is an element name. A class selector begins with a dot; an ID selector begins with #. The punctuation belongs to the CSS selector, not the HTML attribute value. Write <p class="warning">, not <p class=".warning">.

An element can have several classes separated by spaces. Both <p class="warning"> and <div class="box warning"> match .warning. An ID must be unique within a page. Its high specificity also makes ID-based styles harder to override, so classes are usually the main reusable styling tool.

Use names that describe a role, such as .error-message or .product-card. A name like .red-text becomes misleading if the design changes to another color. Class names are case-sensitive: .Warning and .warning differ. A name beginning with a digit needs escaping in a CSS selector; choosing .three-columns avoids the invalid unescaped form .3-columns.

Require several conditions on one element

Writing selectors together makes a compound selector. The same element must satisfy every part. p.intro matches paragraphs that have the class intro. .card.featured matches an element with both classes.

<p class="note important">Doors open at 19:00.</p>
<p class="note">Bring your ticket.</p>

.note { color: #333333; }
.important { font-weight: bold; }
p.note.important { border-left: 4px solid crimson; }

First find the matches. Both paragraphs have note, so both get dark gray text. Only the first has important, so only it becomes bold. The compound selector adds the left border to that same first paragraph because it is a p with both classes. No extra wrapper is needed.

A space changes the task: p .intro selects an element with class intro inside a paragraph. It does not select the paragraph itself. Keep the parts together when they describe the same element.

Share a declaration block

A comma creates a selector list:

h1, h2, h3 { font-family: Georgia, serif; }

Each selector independently matches its heading level. Without the commas, h1 h2 h3 would ask for an h3 inside an h2 inside an h1.

An invalid selector in an ordinary selector list can invalidate the entire rule. h1, h2..title, h3 styles none of those headings because the doubled dot is invalid. When a shared rule appears absent, check every selector in the list, not only the one for the element you inspected.

Some styling conditions are already present in HTML attributes. Others depend on what the reader is doing or where an element sits among its siblings. CSS can match these conditions without adding a class for each one.

Select an attribute or its value

Attribute selectors use square brackets. [alt] matches the presence of an attribute, even if its value is empty. input[type="email"] requires the exact attribute value.

Add i before the closing bracket to ignore case, as in a[href$=".pdf" i]. It also reaches a link ending in .PDF. A whole-word match prevents note from accidentally matching a longer class word such as notebook.

Select a state or position

A pseudo-class uses one colon: :hover, :focus, :checked or :disabled. :focus-visible selects a focused element when the browser determines that a visible indicator is needed, commonly during keyboard navigation.

A link can be visited and hovered at the same time. For competing rules with the same specificity, write link states in this order: :link, :visited, :focus, :hover, :active. A later visited-color rule would otherwise beat an earlier hover-color rule on a visited link. Browsers restrict :visited to certain color changes for privacy; setting its font weight does not work, and transparency cannot reveal visit history.

Structural pseudo-classes count siblings. :first-child means the first element child of its parent. In <article><h2>News</h2><p>Update</p></article>, p:first-child matches nothing. p:first-of-type does match that paragraph.

:nth-child(3) selects the third child. odd selects positions 1, 3, 5; even selects 2, 4, 6. In :nth-child(3n+1), start with n = 0, then 1, 2 and 3: the matched positions are 1, 4, 7 and 10. li:not(:last-child) excludes the last item, making it useful for separators only between items.

Style a part or add a cue

A pseudo-element uses two colons. ::first-line and ::first-letter style text parts; ::marker styles list markers, ::placeholder a field's hint, and ::selection highlighted text. The older single-colon forms for before, after, first-line and first-letter still work.

.required::after {
  content: " *";
  color: crimson;
}

::after creates content inside the selected element after its existing content. ::before creates it before. Both need a content value; even content: "" creates a decorative box. Essential wording belongs in the HTML, where it remains actual document content. Use these pseudo-elements for decoration or small cues, since generated text is not reliably selectable or copyable like HTML text.

HTML elements form a tree. An element directly inside another is its child; anything nested inside it is a descendant. Elements sharing a parent are siblings. A combinator connects selectors by one of these relationships.

Follow the relationship to the target

The rightmost part names the element that receives the declarations. h2 + p styles the paragraph, not the heading. Both sibling combinators look forward through siblings; neither selects a parent or a previous sibling.

Trace a nested list

<ul class="menu">
  <li>Guides</li>
  <li>Topics
    <ul>
      <li>Typography</li>
    </ul>
  </li>
</ul>

.menu li matches all three list items because all three are descendants of the outer list. .menu > li matches only “Guides” and “Topics”: their parent is the list with class menu. The “Typography” item's parent is the inner ul, which does not carry that class.

This distinction matters when top-level items need large padding but nested items need compact spacing. A descendant selector reaches every depth unless another condition narrows it.

Trace following siblings

<article>
  <h2>Opening hours</h2>
  <p>Visit in the morning.</p>
  <aside>Closed on holidays.</aside>
  <p>Booking is optional.</p>
</article>

h2 + p matches “Visit in the morning.” It does not skip the aside to find another paragraph. h2 ~ p matches both paragraphs because both follow the heading and share its parent. If a paragraph were inside the aside, it would not be a sibling of the heading and would not match either selector for that reason.

Combine relationships without overreaching

.sidebar > ul a:hover matches hovered links anywhere inside a ul whose direct parent has class sidebar. Read from the right: a hovered link; inside a list; that list directly inside the sidebar. The space allows intermediate elements between the list and the link.

Combinators do not add specificity. The selector's element, class, ID and other matching parts still do. Long chains can therefore make rules harder to maintain even though the relationship symbols add no points: changing the HTML nesting can break their matches. A descriptive class on the target, such as .menu-link, often expresses a reusable role more clearly.

When a rule fails to match, inspect the actual tree instead of counting visual gaps. Two elements can appear next to each other on screen while having different parents in the HTML. Comments and whitespace do not count as element siblings for these combinators.

The cascade chooses a winning declaration for each property on each element. It does not choose one whole rule and discard all the others. With p { color: gray; font-size: 18px; } and .lead { color: black; }, a paragraph with class lead can take its color from the class rule and its size from the type rule.

Compare in the correct order

First remove declarations that do not apply: their selectors must match, and any conditions must hold. Then compare origin and importance, including cascade layer priority. Normal inline author styles outrank normal author stylesheet rules. When declarations remain tied at these earlier stages, compare specificity; use order of appearance for a remaining tie.

Two equal-priority .button rules setting different background colors are resolved by order: the later one wins. Stylesheets linked later in HTML come later for these ties too. A file arriving faster over the network does not make it later in the cascade.

Understand importance before adding it

An inline declaration such as style="color: purple;" beats normal author stylesheet selectors, even selectors with IDs. An author stylesheet declaration with !important can beat that normal inline declaration.

<p class="note" style="color: purple;">Check the time.</p>

p { color: gray !important; }
.note { color: blue; }

The paragraph is gray. Importance is compared before selector specificity or the normal inline advantage. If the inline color also has !important, that important inline declaration wins against the important author stylesheet rule.

For important declarations, origin priority reverses: important browser declarations outrank important user declarations, which outrank important author declarations. This protects rules that readers or browsers must enforce. Within one origin, inline and layer precedence still come before specificity and source order.

Using !important for every conflict creates increasingly hard overrides. Prefer a simpler selector or a deliberate order. Overriding third-party rules you cannot edit can justify an important declaration; it should be a considered exception.

Group rules into cascade layers

@layer reset, base, components;
@layer base {
  p { margin: 0 0 1rem; }
}

This declares the layer order before their rules. For normal declarations, later layers beat earlier layers regardless of selector specificity. Normal rules outside any layer beat normal layered rules. A low-specificity component rule can therefore override a high-specificity base rule without adding IDs.

Important declarations reverse that layer order: earlier layers beat later ones, and important layered declarations beat important unlayered declarations. This reversal preserves important protections in foundational layers. When investigating a conflict, establish the winning origin, importance and layer group before spending time counting selector parts.

Specificity measures the selector's targeting weight. Compare it only among declarations still tied in the earlier cascade stages, including origin, importance, layer and inline priority.

Count three columns

Write specificity as ID–CLASS–TYPE, such as 0-1-1.

The universal selector * and combinators add nothing. For a[href^="https"]:focus, count no IDs, two CLASS parts (the attribute and :focus) and one TYPE part (a). The result is 0-2-1.

More examples: .nav a is 0-1-1; ul li a:hover is 0-1-3; #main .card > h2 is 1-1-1; article p::first-line is 0-0-3. A pseudo-element counts with types even though its name begins with colons.

Compare from the left

Compare IDs first. If they tie, compare CLASS; if those tie, compare TYPE. Only equal triples move on to source order. These are separate counts, not digits in a decimal number: 0-11-0 still loses to 1-0-0. Extra classes cannot carry over into an ID.

<nav id="site-nav">
  <a class="active" href="/">Home</a>
</nav>

#site-nav a { color: white; }
nav a.active { color: orange; }
.active { color: yellow; }

Assume these are normal declarations in the same author layer. Their scores are 1-0-1, 0-1-2 and 0-1-0. The first wins, so the link is white. Its ID column settles the comparison before any class or type counts matter.

#site-nav .active would win with 1-1-0, but a class-based design is easier to extend: .site-nav a can supply the base style, with .site-nav .active changing the active link. This keeps specificity low and fairly even.

Know the functional exceptions

:is(), :not() and :has() add no weight for the function itself. Their most specific argument supplies the weight. Thus li:not(.done) is 0-1-1, and :is(#intro, p) a is 1-0-1. Count the most specific selector in the argument list, not the one you find visually closest to the element.

:where() and everything inside it always contribute zero. :where(#main) p therefore scores 0-0-1. It is useful for defaults that should be easy to override.

The distance to an ancestor does not count. body h1 and html h1 both score 0-0-2, so a later declaration wins their tie. Inline styles are handled before selector specificity, and !important belongs to importance. Neither is another ordinary selector part to add to the triple.

Inheritance lets a child receive a value from its parent when that property normally inherits and no declaration supplies a different value on the child. It is why one body rule can establish the text color and font for much of a page.

Separate inherited text from box settings

Most text properties inherit: color, font properties, line-height, letter-spacing, text-align and text-transform. List styles and visibility also inherit. Box properties such as margin, padding, border, width, height, backgrounds, display and box sizing do not.

body { color: #222222; font-family: Georgia, serif; }
h1, h2 { font-family: Arial, sans-serif; }
footer { color: #666666; }

Ordinary body text uses dark gray Georgia. Headings get their directly assigned font family and keep the inherited color. Footer text inherits Georgia while its color changes locally.

A child's transparent background lets the parent's background show through; that does not mean the child inherited the background color. Likewise, children of a bordered box do not automatically get their own borders.

Direct assignments beat inherited candidates

With #content { color: red; } and p { color: blue; }, a paragraph inside the content area is blue. The ID's specificity does not compete with the paragraph rule because the declarations target different elements. The paragraph already has a directly assigned color, so it does not need the inherited red.

Children generally inherit computed values. If a section has font-size: 20px and its child has font-size: 0.8em, that child computes to 16px. A paragraph inside it inherits 16px; it does not multiply by 0.8 again. A unitless line height is useful because the inherited value remains a multiplier for each child's own font size.

Choose what a reset means

For author CSS, revert exposes user or browser-origin styling. The difference matters on a div: display: initial gives the property's initial inline, while display: revert restores its usual browser block display. An initial value belongs to the CSS property; a browser default can depend on the HTML element.

inherit works even on a property that normally does not inherit, such as border: inherit. button, input { font: inherit; } replaces the controls' directly assigned fonts with their parent's font. all: unset resets almost every property at once, which also removes useful built-in appearance.

One apparent exception is an underline. text-decoration is not inherited, but a parent's underline is drawn through its inline descendants. Setting text-decoration: none on a nested span cannot erase the parent's line. Remove it from the parent and apply it only to the text that should carry it.

color sets text color. Backgrounds, borders, outlines, decorations and shadows accept color values too. The same color can be written in several forms; choose a notation that makes the intended change easy to understand.

Read names and hexadecimal channels

CSS has about 150 named colors, including navy, tomato and rebeccapurple. Names are convenient for quick experiments, but their everyday meanings can surprise you: green is #008000, while bright pure green is lime, or #00ff00. Exact values remove that uncertainty.

A six-digit hex color has three channel pairs: red, green and blue. Each pair ranges from 00 to ff, equivalent to 0 through 255. All zero gives black; all maximum gives white. Equal pairs produce a gray, as in #808080.

Three-digit hex doubles each digit: #f0a expands to #ff00aa. It does not add zeros. A color such as #1e90ff cannot be shortened because not every pair repeats its digit. Capital and lowercase hex letters mean the same values.

To convert a pair, multiply its first digit by 16 and add the second. The letters a through f mean 10 through 15. For #1e90ff, 1e gives 30, 90 gives 144 and ff gives 255. The matching RGB notation is rgb(30 144 255). Older code may use commas or rgba(); those forms still work.

Describe hue or transparency

hsl() names hue, saturation and lightness. Hue is an angle: 0 or 360 is red, 120 green and 240 blue. Saturation runs from gray at 0% to full color at 100%. Lightness runs from black at 0% to white at 100%. A pure hue has 100% saturation and 50% lightness, as in hsl(0 100% 50%). Changing only lightness makes related dark and pale versions.

An alpha value follows a slash: rgb(0 0 0 / 0.6) is black at 60% opacity. Zero is fully transparent and one fully opaque. Eight-digit hex adds an alpha pair: #00000080 has 128 out of 255, about 50% alpha. transparent is fully transparent.

.notice {
  color: white;
  background-color: rgb(0 0 0 / 0.6);
}

Only the background is partly transparent here. opacity: 0.6 would instead fade the whole element, including its text and children. That difference matters when you want solid, readable text over a tinted surface.

Reuse color and check the result

currentColor means the element's own text color. With color: #0055aa; border: 2px solid currentColor;, the border follows the text. Changing the text color also changes that border without repeating a color value.

WCAG 2.2 level AA requires at least 4.5:1 contrast for normal text and 3:1 for large text, about 24px or about 18.5px when bold. #767676 on white is about 4.54:1; #999999 on white is about 2.85:1 and fails both thresholds. Use a contrast checker or the browser's color tools on the actual foreground/background pair, including the effect of transparency.

A length combines a number with a unit, such as 16px or 1.5rem. There is no space between them. A nonzero width needs a unit: width: 300; is invalid. Zero can omit its unit. Some properties deliberately take plain numbers, including line-height: 1.5, opacity: 0.8 and font-weight: 700.

Match the unit to its reference

A CSS pixel is not necessarily one physical screen dot. High-density screens can use several device pixels for a CSS pixel. Fixed unit relationships include 1in = 96px = 2.54cm and 1pt = 1/72in. Thus 12pt equals 16px and 1cm is about 37.8px. Those conversions do not guarantee a physical measurement on every screen.

Work through font-relative values

Suppose a parent has a 16px font and its child has font-size: 1.25em; padding: 2em;. Calculate font size first: 1.25 times 16px gives 20px. The padding then uses the child's own size, so 2 times 20px gives 40px on each side.

Nested em font sizes can compound. With li { font-size: 1.25em; }, three nested levels starting from 16px become 20px, 25px and 31.25px. 1.25rem instead gives 20px at every level when the root is 16px.

Leaving the root size at the browser default, or setting it as a percentage, lets relative text respond when a reader changes that default. A fixed html { font-size: 16px; } overrides that setting. A practical pattern is rem for font size and em for a button's padding, so its spacing grows with its own text.

Check percentages and the viewport

The property determines the percentage reference. A containing block supplies a box-size reference; in these normal-flow examples it is usually the parent’s content area. A width: 40% child in a 600px containing block is 240px wide before any content-box padding or border. font-size: 150% uses the parent's font size. Even top and bottom percentage padding and margins use the containing block's width, not its height.

1vw is 1% of viewport width; 1vh is 1% of viewport height. In a 1280 by 800 CSS-pixel viewport, 50vw is 640px and 10vh is 80px. 100vw can include scrollbar width, producing horizontal overflow where 100% of the parent would fit.

max-width: 65ch gives a text column a font-related width. It is roughly a reading-length measure, not a promise that every line has exactly 65 characters.

Combine units with a calculation

width: calc(100% - 40px); subtracts a fixed amount from a relative size. Keep spaces around + and -; calc(100%-40px) is invalid. Browsers compute font-relative lengths into pixels, while container-size percentages resolve during layout. Developer tools show the resulting sizes so you can check both the reference and the arithmetic.

From inside out, a box has content, padding, border and margin. Content holds text, images or child elements. Padding creates breathing room around that content. The border surrounds the padding; margin separates the border box from its neighbors.

A background fills content and padding and extends under the border, but never colors the margin. Use padding when the space should be part of a colored card. Use margin for space outside it. Margins can be negative; padding cannot.

Read the spacing shorthands

margin, padding and border-width accept one to four values:

The four-value order runs clockwise from the top. Use longhands such as padding-left to change just one side after the shorthand. Do not read the second value of a two-value form as the bottom: it sets both horizontal sides.

Calculate the default content box

.card {
  width: 300px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}

The initial box-sizing value is content-box. The declared 300px width covers only the content. Add 20px padding twice and 5px border twice: the border box is 350px wide. Add the two 10px margins to get 370px of horizontal space.

Height works the same way when it is explicitly sized, but text often needs a box that can grow. Leaving height: auto avoids trapping changing content in a fixed height.

Include padding and border in the width

With box-sizing: border-box, the same declared width includes padding and border. The border box stays 300px; subtract 40px padding and 10px border to find a 250px content area. Margins remain outside, giving 320px of horizontal space.

A common reset applies this model to elements and their generated parts:

*, *::before, *::after { box-sizing: border-box; }

box-sizing does not inherit automatically, so the rule selects the boxes directly.

A full-width child makes the difference easy to see. In a 600px container, width: 100%; padding: 0 20px; gives a 640px border box under content-box sizing, before any border. With border-box sizing, the same 600px declared width includes the padding and fits the container.

Let content fit safely

min-height sets a lower bound while allowing growth. max-width: 800px lets an auto-width block shrink in a narrow container while preventing it from becoming wider than 800px.

If content exceeds a fixed box, overflow controls the result: visible spills out, hidden clips, scroll requests scrollbars and auto provides scrolling when needed. pre { overflow: auto; } gives a long code line its own scrolling area. Clipping is a poor fix for text that readers still need; first check whether the fixed size is necessary.

Use the Computed panel's box diagram to compare the browser's content, padding, border and margin values with your calculation.

Display type determines how a box joins its surroundings. A block normally starts a new line and fills available width when width is auto. An ordinary inline box flows within text and is sized by its content. Inline-block keeps the inline position while accepting explicit dimensions.

Choose the behavior you need

For ordinary inline elements such as span and a, top and bottom margins have no effect. Vertical padding and borders are drawn but do not push neighboring lines apart, so they can overlap them. Horizontal padding, borders and margins do take space along the line.

nav a {
  display: inline-block;
  padding: 8px 16px;
}

These links remain in a line while their padded boxes reserve vertical space. display: block would give each link its own line. Images are a special inline case: they accept width and height. Their default baseline alignment can leave a small gap below for letter descenders; img { display: block; } removes that baseline gap.

display: none removes the box and its space, and removes it from screen-reader reading. visibility: hidden hides it while preserving its space.

Center a box or center its contents

.page {
  max-width: 960px;
  margin: 0 auto;
}

On a wider container, the block stops growing at 960px and the two horizontal auto margins split the remaining space equally. A block that fills the container has no leftover horizontal space to split. Auto margins do not center an ordinary inline box, and vertical auto margins in normal block flow resolve to zero.

text-align: center does a different job: it centers inline content inside a block. A centered paragraph box can still have left-aligned text; a full-width paragraph can have centered text without becoming a narrower centered box.

Recognize collapsing vertical margins

In normal block flow, adjoining top and bottom margins can collapse. Two positive margins become the larger one. A heading with 24px bottom margin followed by a paragraph with 16px top margin has a 24px gap, not 40px. Horizontal margins do not collapse.

With positive and negative margins, combine the largest positive with the most negative: 20px and −8px become 12px. If all are negative, the most negative wins. An empty box without separating content, height, border or padding can collapse its own top and bottom margins.

A first child's top margin can also collapse through a parent with no separating border, padding or earlier content. The space then appears outside the parent's background. Add parent padding or a border, or remove the child's top margin. Similar conditions allow a last child's bottom margin to collapse; a parent height or minimum height can prevent that bottom case.

Inline-block boxes do not collapse margins, nor do flex/grid items or floated and absolutely positioned boxes. A simple text-spacing pattern sets top margins to zero and uses bottom margins, with padding for space inside containers.

A font choice is a preference with a fallback plan. Devices have different installed fonts, and a downloaded font may arrive after the text. A font stack keeps the page readable while preserving a suitable style.

Build a stack

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
}

The browser tries the family names in order and uses an available font. Quote names containing spaces. Leave generic families unquoted: "sans-serif" asks for a named font with that exact name; sans-serif asks the browser for a suitable generic font.

Generic choices include serif, sans-serif, monospace, cursive, fantasy and system-ui. The last uses the system's interface font. Fonts often called web-safe, such as Arial, Georgia and Verdana, are common, not guaranteed. A generic fallback still belongs at the end.

font-size accepts lengths, percentages and size keywords. With a 16px root, 1rem gives 16px and 2.5rem gives 40px. Relative sizes can follow reader settings.

Set weight, style and shorthand carefully

font-weight: normal equals 400; bold equals 700. Values such as 300 and 600 request other weights when the font provides them. If a requested weight is absent, the browser chooses an available one or may synthesize bold. With only 400 and 700 loaded, requesting 300 uses 400. bolder and lighter are relative to the parent.

font-style: italic requests an italic face; normal removes that style. The font shorthand needs both size and family:

blockquote {
  font: italic 700 1.125rem/1.6 Georgia, serif;
}

Optional style, variant and weight come before size. A slash attaches line height to size, and family comes last. Omitting size or family invalidates the shorthand. Other omitted font settings reset: font: 1rem Arial, sans-serif; resets a previous bold weight to normal.

Load a font file

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body { font-family: "Inter", Arial, sans-serif; }

@font-face assigns a CSS family name to a file. Use that declared name in the stack, not the file name. Relative file paths start from the stylesheet's location. WOFF2 is a compressed format supported by current browsers.

Static fonts generally need separate files and rules for each weight and style. Variable fonts can hold a weight range in one file. Load the files the design actually uses. font-display: swap displays a fallback immediately and replaces it when the web font becomes available.

A font service can supply an HTML link and the family declaration; self-hosting avoids a font request to a third-party server. Check that the font license permits website use. If the font looks wrong, inspect the rendered font and the file request. A misspelled CSS family silently falls back, so readable text alone does not show that the intended font loaded.

Text styling needs to survive changes in size, content and input method. Begin with line spacing and readable widths, then add list and link details that tell readers how the content works.

Let line height follow each font size

Use a unitless line height such as line-height: 1.5. With 16px body text it creates 24px lines. Children inherit the number, so a 32px heading gets 48px lines. A parent value of 1.5em or 150% instead computes to 24px there, and a child can inherit that fixed 24px line height even when its own text is larger. The default normal depends on the font and is often around 1.2.

body { font: 1.125rem/1.6 Georgia, serif; color: #222222; }
h1 { font: 700 2.25rem/1.2 Arial, sans-serif; }
p { max-width: 65ch; }

At a 16px root, the body text is 18px with 28.8px lines; the heading is 36px with 43.2px lines. The paragraph limit prevents very long lines on a wide screen.

text-align positions inline content within a block. Values include left, right, center, justify, start and end; start/end follow writing direction. It does not move the block itself. Justification in narrow columns can create large word gaps.

Change presentation without rewriting text

text-transform can show uppercase, lowercase or capitalized words without changing the HTML text. letter-spacing, word-spacing and text-indent control different kinds of space. text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5); gives horizontal offset, vertical offset, blur and color.

text-decoration adds underlines, overlines or line-through marks. It can also set style and color, as in underline wavy crimson. Thickness and underline offset refine a line. Readers expect underlined text to be a link, so reserve that cue accordingly.

Style lists without leaving accidental indentation

list-style-type chooses markers such as disc, square, decimal or lower-alpha. list-style-position: outside keeps markers outside the text block; inside puts them into the first line, so wrapped lines can begin beneath the marker. list-style-image provides an image marker, and li::marker can color the marker alone.

For a plain navigation list, use .menu { list-style: none; margin: 0; padding: 0; }. Removing markers alone leaves the list's default start padding. list-style: square inside is a shorthand combining marker settings.

Keep links visible during use

Order equal-specificity state rules as link, visited, focus, hover, active. A link can be both visited and hovered; source order decides their competing color declarations. :active means during activation, not the current page.

Keep links recognizable by more than color alone, commonly an underline in running text. Give keyboard focus a clear indicator:

a:focus-visible {
  outline: 3px solid #f2a900;
  outline-offset: 2px;
}

Do not remove the focus outline unless another visible focus style replaces it. An outline takes no box-model space, so this cue does not shift the surrounding text.

A background sits behind a box's content. Its color fills the content and padding and extends under the border; the margin stays transparent. An image is drawn above the background color, so a color can provide a dependable surface while the image loads.

Resolve the path from the stylesheet

.hero {
  background-color: #1a2b3c;
  background-image: url("../images/hero.jpg");
}

If the CSS is in css/styles.css and the image is in the site's top-level images folder, .. moves out of css before entering images. A CSS image URL starts from the CSS file, unlike the stylesheet link, which starts from the HTML file. Check the image request if a valid rule displays only its fallback color.

Backgrounds are decoration. A screen reader does not announce them as images. Put an informative image into HTML with meaningful alternative text. A fallback color close to the image's main tone also helps text stay readable if the image is slow or missing.

Control repetition, scale and position

Images initially repeat at their natural size. no-repeat uses one copy; repeat-x makes a row and repeat-y a column. space distributes whole tiles with gaps, while round adjusts tiles to fit a whole number.

For an 800px by 400px box and a square 1000px image, cover scales the image to 800px square, leaving 400px of image height outside the box. Contain scales it to 400px square; with no-repeat, 400px of box width remains uncovered. Setting only contain does not turn repeating off.

The initial position is top left. background-position: center centers an image; right 20px bottom 10px offsets it from those edges. A horizontal value comes first. Center plus cover keeps the middle visible when cropping is necessary.

Generate and stack images

A gradient is an image, so put it in background-image:

background-image: linear-gradient(to right, #1e90ff, #8a2be2);

The first color is on the left and the second on the right. Angles and positioned stops give more control; radial-gradient(circle, white, steelblue) spreads outward from the center. A gradient in background-color is invalid.

Separate multiple images with commas; the first is on top. A translucent black gradient listed before a photo can darken the image without fading the text.

Use the shorthand deliberately

background: url("hero.jpg") center / cover no-repeat #1a2b3c; combines an image, position, size, repetition and color. Size follows position after a slash. Only the final layer can have a color. Omitted background settings reset, so a later background: white; removes a previous image.

background-attachment initially uses scroll, moving with the element as the page scrolls. fixed keeps the background attached to the viewport. Test the actual box and text after adding decoration; scaling and cropping should not hide information readers need.

A border forms part of the box model. An outline or shadow is drawn around the box without reserving additional space. Choosing between them changes both the appearance and the sizing behavior of a style.

Give a border a style

.note {
  border: 1px solid #cccccc;
  border-left: 4px solid crimson;
  padding-left: 12px;
}

The shorthand sets width, style and color; these parts may appear in any order. The border style initially is none, so setting only width and color does not produce a visible border. Styles include solid, dashed, dotted, double, groove, ridge, inset and outset, as well as none and hidden.

If width is omitted it uses medium, commonly 3px in current browsers. If color is omitted it uses currentColor, matching the element's text. Side shorthands such as border-top and longhands such as border-left-color let you add an exception after a general border. For example, border-top: none removes only the top edge after a four-sided border declaration.

Under content-box sizing, a 2px border on each side adds 4px to width and height. Increasing border width on hover can therefore shift nearby content. Keep the border width stable and change its color, or use an outline for a cue that takes no space. Under border-box sizing, a thicker border instead uses more of the declared box's interior.

Round corners in a predictable order

border-radius: 8px rounds all corners even when the border itself is invisible. With four values the order is top left, top right, bottom right, bottom left. Two values apply to opposite corner pairs: the first to top left/bottom right, the second to top right/bottom left.

border-radius: 50% makes a square box circular and a rectangle elliptical. Its own background is clipped to that rounded edge. The radius does not itself crop overflowing child content; that is a separate overflow decision. Radius does not add to the box's measured dimensions.

Add a focus line or depth

.link:focus-visible {
  outline: 3px solid navy;
  outline-offset: 2px;
}

An outline is drawn outside the border and takes no layout space. Its offset creates a gap from the border. It is a useful focus cue because it can appear without moving neighboring boxes.

box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); gives a horizontal offset of zero, a 2px downward offset, 6px blur and a translucent black color. An optional spread value comes after blur. inset draws the shadow inside; comma-separated values add multiple shadows. Shadows follow rounded corners and do not add box-model space.

Check one finished card

A card with width: 280px; padding: 16px; border: 1px solid #dddddd; is 314px wide in content-box sizing. Add twice 16px and twice 1px to 280px. Under border-box sizing it stays 280px, leaving 246px for content. A 12px corner radius and a soft shadow change neither calculation. They change the drawn edge, not the dimensions used to place other boxes.