What Is CSS? How the Web Gets Its Style

CSS — Cascading Style Sheets — is the language that controls how a web page looks. Where HTML gives content structure and meaning, CSS gives it color, typography, spacing, and layout. Strip the CSS from any modern site and you are left with plain, unstyled text stacked from top to bottom. Add it back and the same document becomes a polished, readable, visually branded experience.

The “Cascading” in the name is the key to understanding CSS. It is not an accident or a quirk — it is the core mechanism that makes the whole system work.

How CSS works: selectors and properties

A CSS rule has two parts: a selector (which elements to target) and a declaration block (what to do to them).

/* Target every <h1> element */
h1 {
  font-size: 2rem;
  color: #1a1a2e;
  margin-bottom: 0.5rem;
}

/* Target elements with the class "card" */
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Target the element with id="hero" */
#hero {
  background-image: url("hero.jpg");
  min-height: 60vh;
}

Each declaration is a property: value pair. Properties like color, font-size, and padding are the vocabulary of CSS — there are hundreds of them, but you use a small core set most of the time.

The cascade, specificity, and inheritance

The “cascading” part means that multiple rules can target the same element, and CSS has a defined order for deciding which one wins. Three factors determine that order:

1. Origin — browser defaults, author stylesheets, and user preferences each have a priority tier. Author styles (the ones you write) normally win.
2. Specificity — a more specific selector beats a less specific one. An ID selector (#hero) beats a class selector (.card), which beats a tag selector (h1).
3. Order — when specificity is equal, the rule that appears later in the stylesheet wins.

Inheritance is a related but separate concept. Some properties (like color and font-family) are automatically inherited by child elements from their parents. Others (like border and padding) are not. Knowing which is which saves hours of debugging.

The box model

Every element in CSS occupies a rectangular box. That box has four layers, from inside out:

• Content — the actual text or image
• Padding — transparent space between the content and the border
• Border — a visible (or invisible) edge around the padding
• Margin — space that pushes other elements away

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #ccc;
  margin: 16px auto;
}

By default, width refers only to the content box, so adding padding and border makes the total rendered size larger than the number you set. Setting box-sizing: border-box — often applied globally — changes this so width includes padding and border, which is almost always what you want.

Modern layout: flexbox and grid

Before flexbox and grid, CSS layout involved floats and absolute positioning — techniques that worked but were fragile. Modern CSS gives you two powerful layout systems:

Flexbox is one-dimensional: it arranges items in a row or a column. It is excellent for navigation bars, button groups, centering a single element, or any layout where items need to share a line and wrap gracefully.

.nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}

Grid is two-dimensional: it places items into rows and columns simultaneously. It is the right tool for page-level layouts, card grids, and anything where you need precise control over both axes.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

You can read a detailed comparison in CSS Grid vs Flexbox.

Responsive design

A responsive site looks good on a phone, a tablet, and a wide monitor without maintaining separate codebases. CSS handles this with media queries, which apply rules only when the viewport matches certain conditions:

/* Stack columns on small screens */
@media (max-width: 640px) {
  .two-column {
    flex-direction: column;
  }
}

Modern CSS also leans on fluid units (rem, %, vw, clamp()) so that many layouts respond naturally without needing explicit breakpoints.

Utility-first frameworks like Tailwind CSS wrap these concepts in pre-built class names, letting you style directly in HTML without writing a separate stylesheet.

Why CSS matters

CSS is what makes the web habitable. Good CSS is invisible — users never notice it working. Bad CSS is impossible to miss: misaligned text, unreadable contrast, layouts that break on mobile. Writing maintainable CSS — one that scales without accumulating specificity battles and overrides — is a genuine engineering skill, not just a cosmetic afterthought. Learn the cascade, respect the box model, and reach for flexbox and grid before anything more exotic. That foundation handles the vast majority of what the web requires.