CSS

CSS is the style language of the web. It controls how structured documents appear on screens, on paper, and in other media. You use it to set color, typography, spacing, layout, visual states, and adaptation to the available space.

HTML gives content meaning and structure. CSS turns that structure into a presentation. Keeping these responsibilities separate lets one document support different layouts, themes, and output conditions without rewriting its content.

CSS is not a list of isolated decoration commands. It is a rule system. A browser matches rules to elements, resolves competing declarations, computes values, creates boxes, and lays those boxes out. That sequence is the durable mental model for understanding CSS.

Read a rule from the outside in

A style rule combines a selector with a declaration block.

.notice {
  color: #17324d;
  padding: 1rem;
  border-inline-start: 0.25rem solid #2f6feb;
}

The selector .notice matches elements with that class. Each declaration pairs a property with a value. Here, color, padding, and border-inline-start are properties.

A declaration only matters when its selector matches and its value is valid. Unsupported or invalid declarations are ignored according to CSS error-handling rules. This behavior supports progressive enhancement: provide a sound baseline, then add newer features.

Prefer classes for reusable styling. Type selectors work well for broad document defaults. Attribute selectors and pseudo-classes express state or structure. IDs are valid selectors, but their high specificity can make ordinary overrides harder.

The cascade resolves conflicts

Several declarations can target the same property on the same element. The cascade selects the winning declaration by considering origin and importance, cascade layer, specificity, scoping proximity when applicable, and source order.

Specificity is only one part of that process. An !important declaration changes the importance tier. A cascade layer changes precedence before specificity is compared between layers. Source order breaks ties only after earlier criteria match.

Use the cascade as an architecture tool:

• Put broad defaults early.
• Keep selectors as specific as the component requires.
• Group resets, third-party rules, components, and overrides into deliberate layers when a project needs them.
• Treat !important as a controlled exception, not routine conflict resolution.

Inheritance handles a different case. When no declaration supplies a value, some properties inherit from the parent and others use an initial value. Text properties often inherit. Box properties such as margin usually do not. The browser's computed-style tools show the final value and where it came from.

Every element participates through boxes

CSS transforms a document tree into boxes for layout. A typical box has four areas:

margin
└── border
    └── padding
        └── content

With the default content-box sizing, a declared width applies to the content box. Padding and borders add to the outer size. With box-sizing: border-box, the declared width includes content, padding, and border.

Many projects establish this predictable sizing rule:

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

Margins create space outside a border. Padding creates space inside it. Borders occupy their own area. Overflow appears when content cannot fit under the chosen sizing and layout constraints. Fix the constraint or allow a deliberate overflow behavior instead of hiding content by default.

Layout starts with normal flow

Without special layout rules, content follows normal flow. Block-level boxes generally stack in the block direction. Inline content flows in lines. This baseline preserves document order and adapts naturally to content.

Use a layout method for the relationship you need:

Need	Starting point
Ordinary document sections	Normal flow
One-dimensional row or column	Flexbox
Two-dimensional rows and columns	Grid
Small offset without removing the item from flow	Relative positioning
Overlay tied to a containing block	Absolute positioning
Viewport-attached control	Fixed positioning
Scroll-aware pinned heading	Sticky positioning

Flexbox lays out items along a main axis and a cross axis. It is useful for navigation, control groups, alignment, and components whose primary relationship is one-dimensional.

Grid provides rows and columns together. It is useful when items align across two dimensions. Grid and Flexbox complement each other. A grid item can contain a flex container, and a flex item can contain a grid.

Positioned layout can remove an element from normal flow. Use that change intentionally. Absolute positioning is useful for overlays and anchored details. It is fragile as the main tool for a content-driven page because removed items no longer reserve normal-flow space.

Values carry relationships

CSS properties accept defined value types. A length can be absolute, relative to a font, relative to a viewport, or relative to another sizing context. Percentages are resolved against a property-specific reference.

Choose units by intent:

• rem for spacing or type tied to the root font size.
• em for a value that should scale with the current element's font size.
• Percentages for a proportion of the relevant containing size.
• fr for a fraction of available Grid space.
• Pixels for small, stable visual measures such as a one-pixel border.
• min(), max(), and clamp() for bounded fluid values.

No unit is universally responsive. A responsive design comes from flexible relationships, useful constraints, intrinsic sizing, and targeted conditional rules.

Custom properties store reusable values in the cascade. They inherit by default, so they work well as design tokens and local component inputs.

:root {
  --space: 1rem;
  --accent: #2f6feb;
}

.card {
  padding: var(--space);
  border-color: var(--accent);
}

Unlike preprocessor variables, custom properties remain part of CSS value computation in the browser. Their placement and inheritance matter.

Responsive CSS reacts to conditions

Start with a layout that works in a narrow or unconstrained space. Let content and flexible sizing do as much work as possible. Add a media query when the design needs a change at a condition, not because a named device category exists.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

@media (width >= 60rem) {
  .page {
    grid-template-columns: 16rem 1fr;
  }
}

Media queries can test viewport characteristics and user preferences. Container queries can adapt a component to the size of its containing context. Prefer content-driven adaptation over assumptions about a particular device.

Honor user preferences such as reduced motion and color scheme when they apply. A preference query is an input, not permission to reduce usability in the default case.

CSS contributes to accessibility

CSS can improve or damage access to content. Preserve a visible focus indicator. Maintain sufficient text contrast. Do not rely on color alone to communicate meaning. Make layouts reflow without requiring two-dimensional scrolling at common zoom conditions.

Visual reordering does not rewrite document order. Grid and Flexbox can make one item appear before another while keyboard and assistive-technology navigation still follow the source. Keep the source order meaningful, then use CSS for presentation.

Do not remove meaningful content only to make a layout fit. Avoid fixed heights around text that can grow. Test zoom, long labels, translated content, narrow viewports, keyboard focus, reduced motion, and forced-color modes.

Debug the computed result

When a style does not work, trace the browser's decision:

1. Confirm that the stylesheet loaded.
2. Confirm that the selector matches the intended element.
3. Check whether the declaration is valid or crossed out.
4. Inspect the winning cascade declaration.
5. Read the computed value.
6. Inspect the box model and active layout context.
7. Reduce the case until the conflicting constraint becomes clear.

Adding specificity until a rule wins hides the cause. Browser developer tools expose matched rules, inheritance, computed values, box dimensions, and Grid or Flexbox overlays. Use that evidence first.

Know the boundary

CSS describes presentation and layout. HTML owns document meaning. JavaScript owns behavior that requires program logic. CSS can express states supplied by the document and environment, but it does not replace semantic markup or application state management.

CSS specifications are modular. There is no single current “CSS version” that every feature shares. Each module advances through the standards process independently, and browser support can differ. Check the specification status and current implementation support before depending on a newer feature.

A practical learning path

1. Write simple rules with type and class selectors.
2. Learn cascade, specificity, inheritance, and computed values.
3. Master the box model, sizing, overflow, and normal flow.
4. Build one-dimensional components with Flexbox.
5. Build two-dimensional layouts with Grid.
6. Use relative units, intrinsic sizing, and bounded fluid values.
7. Add media and container queries when content requires a change.
8. Organize custom properties and cascade layers around clear responsibilities.
9. Test accessibility, browser support, and failure behavior.
10. Use developer tools and specifications to diagnose real layouts.