CSS That Makes Sense

CSS turns structure into a usable design.

Why does the same HTML feel premium on one site and impossible to use on another? The difference is rarely magic. It is a set of deliberate CSS decisions about space, contrast, type and layout.

CSS means Cascading Style Sheets. It is a styling language—not a programming language or JavaScript framework. CSS controls colour, spacing, typography, layout, responsive behaviour, focus states and motion for HTML content.

You can use it to make a portfolio readable on phones, lay out a dashboard, theme a form, build print styles and keep a whole product visually consistent. You need no account and no installation for ordinary CSS: create a styles.css file and link it from HTML.

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

CSS answers two questions.

First: which elements match this selector? Second: if several rules set the same property, which declaration wins? Most “CSS is broken” moments become easier when you inspect those two questions instead of adding more selectors.

:root {
  --ink: #211d1d;
  --paper: #fffaf0;
  --accent: #168249;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, sans-serif;
}

.notice { border-left: 4px solid var(--accent); }
.notice strong { color: var(--accent); }

Every element is a box

Content sits inside padding, then a border, then margin outside. Add this once so declared widths include padding and borders:

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

Let the browser share the space.

Use Flexbox for a row or column where items share one direction. Use Grid when rows and columns work together. Avoid placing ordinary page content with fixed coordinates; it breaks when text grows or a screen shrinks.

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

Responsive starts with flexible defaults

• Use max-width to limit long reading lines.
• Let images shrink with max-width: 100% and height: auto.
• Use rem, percentages, min(), max() and clamp() where they express a real constraint.
• Add a media query only when the content actually needs a different arrangement.

.page {
  width: min(70rem, 100% - 2rem);
  margin-inline: auto;
}

h1 { font-size: clamp(2.4rem, 8vw, 5.5rem); }

A polished page still has to work.

Test default, hover, keyboard focus, disabled, loading, error and empty states. Never remove an outline without adding an equally visible focus treatment. Check contrast, zoom to 200%, and respect reduced-motion preferences.

.button:focus-visible {
  outline: 3px solid #257fc4;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
  }
}