CSS: The Presentation Layer for Web Content

The same HTML article can appear as a narrow mobile column, a printed document, or a desktop layout with navigation and a table of contents.

CSS creates those presentations.

Cascading Style Sheets apply visual and layout rules to selected HTML elements while preserving the document's underlying structure and meaning.

CSS is a rule system, not a sequence of drawing commands.

Rules, selectors, and declarations

A CSS rule contains a selector and declarations:

h1 {
  color: navy;
  font-size: 2rem;
}

The selector chooses elements. Declarations assign property-value pairs.

Selectors can match:

• Element type
• Class
• ID
• Attribute
• State
• Relationship

.article-link:hover {
  text-decoration: underline;
}

Classes are the common reusable styling hook.

The cascade

Several rules can target the same property.

The browser resolves them using:

• Origin and importance
• Cascade layers
• Specificity
• Source order

Specificity measures selector weight. An ID selector generally outweighs a class selector, which outweighs an element selector.

Using increasingly strong selectors to fight prior styles creates fragile code.

Clear component boundaries, low-specificity utilities, and cascade layers make resolution more intentional.

Inheritance

Some properties inherit from ancestors:

• Color
• Font family
• Line height

Others generally do not:

• Margin
• Border
• Width

Inheritance allows setting typography on a container and letting descendants follow.

Values such as inherit, initial, unset, and revert control behavior explicitly.

The box model

Elements are laid out as boxes with:

content
padding
border
margin

By default, declared width applies to content, and padding plus border increase the outer size.

Many projects use:

* {
  box-sizing: border-box;
}

With border-box, declared width includes padding and border, making sizing easier to reason about.

Margins create space outside the border and can collapse in some block-layout situations.

Normal flow

Without special layout, block elements stack vertically and inline content flows within lines.

Normal flow is responsive by default. Problems often arise when rigid widths and positioning override it unnecessarily.

Build from natural flow, then add layout systems where relationships require them.

Absolute positioning removes an element from normal flow and can cause overlap if dimensions change.

Flexbox

Flexbox arranges items along one primary axis.

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

It is useful for:

• Toolbars
• Navigation
• Button groups
• One-dimensional alignment
• Distributing available space

Properties control direction, wrapping, alignment, growth, and shrink behavior.

A flex child may need min-width: 0 to allow long content to shrink rather than overflow.

Grid

Grid controls rows and columns together.

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: 2rem;
}

Grid suits:

• Page layouts
• Repeated cards
• Data-aligned interfaces
• Two-dimensional placement

Tracks can use fixed sizes, fractions, minimums, maximums, and content-based sizing.

Responsive grids can adapt without many breakpoints using minmax() and auto-placement.

A concrete example: a responsive article

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
 
@media (min-width: 72rem) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 15rem;
  }
}

On narrow screens, content uses one column. On wide screens, a table of contents gains a sidebar.

The HTML remains unchanged.

Responsive design adapts layout to available space and user needs, not to a list of device brand names.

Units

CSS supports:

• Pixels
• Percentages
• em and rem
• Viewport units
• Container units
• Fractions in Grid

Relative units can respect user font settings and parent context.

Viewport width should not control every font size; extreme screens can produce unreadable text. Use bounded values when fluid sizing is appropriate.

Stable interface controls often need explicit minimum dimensions.

States and interactions

Pseudo-classes style states:

button:hover
button:focus-visible
button:disabled
input:invalid

Do not rely only on hover because touch and keyboard users may not have it.

Visible focus indicators are essential.

Animations should respect:

@media (prefers-reduced-motion: reduce) { ... }

Color choices need sufficient contrast.

Custom properties

CSS variables store reusable values:

:root {
  --accent: #00c8ff;
  --space-3: 0.75rem;
}

They participate in the cascade and can change within a subtree.

Custom properties support:

• Themes
• Design tokens
• Component variants
• Runtime updates

They are resolved by the browser rather than being simple preprocessor substitutions.

Performance and rendering

Style changes can trigger:

• Style recalculation
• Layout
• Paint
• Composite

Animating transform and opacity often avoids repeated layout, but excessive layers and large painted regions still cost memory and processing.

Measure before optimizing. A clear layout is more valuable than blindly applying performance folklore.

Common misunderstandings

"The last rule always wins"

Only after origin, importance, layer, and specificity are considered does source order decide ties.

"CSS changes HTML semantics"

It can hide or visually reorder content, but does not automatically change document meaning or accessibility order.

"Responsive design means many device-specific breakpoints"

It means adapting to available space, content, input methods, and preferences.

"Absolute positioning is the main layout tool"

It is useful for overlays and anchored details, while flow, Flexbox, and Grid handle most structural layout.

Knowledge check

The one idea to remember

CSS is a cascading constraint and presentation system over structured HTML.

Selectors target content, the cascade resolves rules, and flow, Flexbox, Grid, responsive queries, and states create adaptable accessible layouts.

Next, we will add JavaScript and see how pages react to events, update state, and request new data.