CSS Basics

What is it?

HTML says what's on a page — a heading, a paragraph, an image. But it says nothing about what color that heading should be, how big the text is, or how much space sits around the image. That's an entirely separate job, handled by a language called CSS (Cascading Style Sheets).

Keeping style separate from structure means the same HTML content can look completely different depending on which styles are applied to it — and it means one set of style rules can be reused across many pages, instead of having to redefine "make this text blue" everywhere blue text appears.

CSS works by writing rules: a selector that says which elements the rule applies to, followed by one or more properties and values that say what to change about them. A property might be color, font-size, or margin; the value is the specific setting, like blue or 16px.

It's common for more than one rule to apply to the same element at once — maybe a general rule styles all paragraphs, while a more specific rule targets just one particular paragraph. The set of rules the browser follows to decide which value wins when rules conflict is called the cascade, and it's where CSS gets its name.

Explain like I'm 10

If HTML is a document's labeled outline, CSS is the style guide applied on top of it afterward — 'make all headings blue, add spacing between paragraphs' — without changing a word of the actual content.

Examples

A basic rule

p {
  color: darkslategray;
  font-size: 16px;
  line-height: 1.5;
}

This rule targets every paragraph element on the page and sets its text color, font size, and line spacing.

The cascade in action

p { color: black; }
.highlight { color: orange; }
#intro { color: red; }

If one paragraph has both class="highlight" and id="intro", all three rules could apply to it. CSS resolves the conflict using specificity and order — here, the id selector wins, so that paragraph renders red, not orange or black.

How it works

When a browser renders a page, it reads all the CSS that applies — whether from a separate stylesheet file, a style tag, or inline on an element — and matches each rule's selector against the elements in the page. For every element, it collects every rule that could apply, then uses a set of tie-breaking rules (roughly: more specific selectors win, and later rules win over earlier ones when specificity ties) to decide the final value for each property.

Why does it exist?

CSS exists so that appearance doesn't have to be tangled up inside content. Before this separation existed, changing a site's look meant editing styling scattered across every single page. With CSS, one stylesheet can restyle an entire site, and the same content can be presented differently for different contexts, like print versus screen.

When to use it

Reach for CSS for anything about how a page looks or is arranged: colors, spacing, fonts, sizing, positioning, and layout. Prefer a shared stylesheet over one-off inline styles whenever a look needs to be consistent across multiple elements or pages.

When not to use it

CSS isn't the tool for describing what content actually is (that's HTML's job) or for making a page react to user actions with new behavior beyond simple visual states (that's JavaScript's job, though CSS alone can handle small interactive touches like hover effects).

Common mistakes

• Being surprised a style 'isn't applying' without realizing a more specific rule elsewhere is overriding it.

• Overusing inline styles instead of a shared stylesheet, making the same visual change hard to apply consistently.

• Forgetting that rule order matters when specificity is equal — a later rule with the same specificity wins.

Practice exercises

1. Easy:

   Write a CSS rule that makes all h1 elements on a page green and centered.

2. Medium:

   Create three rules that could all apply to the same element (by tag, class, and id) and predict which value wins for a shared property.

3. Hard:

   Given a small HTML page with existing conflicting styles, trace through the cascade by hand to determine the final rendered color of a specific element.

Interview questions

What problem does CSS solve that HTML alone doesn't?

HTML describes structure and content, but nothing about appearance. CSS controls how that content looks — color, size, spacing, layout — and keeping it separate means the same content can be restyled, or reused across pages, without touching the markup.

What is a CSS selector?

The part of a CSS rule that determines which elements the rule's properties apply to — it can match by tag name, class, id, attribute, or relationship to other elements.

What is 'the cascade' in CSS?

The set of tie-breaking rules the browser uses when multiple CSS rules could apply to the same element and property — resolved primarily by specificity, and then by which rule appears later in source order when specificity ties.

How is specificity calculated, at a high level?

Roughly in this order of weight: inline styles beat everything, then id selectors, then class/attribute/pseudo-class selectors, then plain tag selectors. A rule with a higher-weighted selector wins regardless of where it appears in the stylesheet.

Given `p { color: black; } .highlight { color: orange; } #intro { color: red; }` applied to a paragraph with `class="highlight" id="intro"`, what color renders, and why?

Red. All three selectors match, but id selectors outweigh class selectors, which outweigh tag selectors, regardless of the order the rules were written in — specificity, not position, decides this one.

If two CSS rules have exactly equal specificity, which one wins?

Whichever rule appears later in the source — later stylesheets, or later rules within the same stylesheet, override earlier ones when specificity is tied. This is the part of 'the cascade' that depends purely on order.

How do inline styles, a `<style>` block, and an external stylesheet differ in how they affect the cascade?

All three can define the same properties, but an inline style attribute on an element outweighs any selector-based rule, no matter how specific, because it isn't competing on selector specificity at all — it's tied directly to that one element.

What does `!important` do, and why is it generally discouraged?

It forces a declaration to win the cascade regardless of specificity or source order, overriding almost everything else. It's discouraged because once one !important is fighting another, there's no normal cascade logic left to reason about — you have to search the whole codebase to know what actually wins.

What is the CSS box model?

Every element is rendered as a box made of four layered regions: the content itself, padding around the content, a border around the padding, and margin outside the border — and an element's rendered size is the sum of all four unless box-sizing changes how that's calculated.

What's the difference between `box-sizing: content-box` and `box-sizing: border-box`?

With content-box (the default), a width you set applies only to the content area, so padding and border add extra pixels on top of it. With border-box, the width you set already includes padding and border, so the element's final rendered width matches the value you wrote.

Why should an `id` selector generally be avoided for general-purpose styling, separate from the fact that it's very specific?

An id is meant to be unique per page, so a rule written against one only ever targets a single element — it can't be reused elsewhere without duplicating the rule, and its high specificity makes it harder to override later if you need to.

What's the difference between `nav a` and `nav > a` as selectors?

nav a matches any <a> nested anywhere inside a <nav>, no matter how deeply. nav > a only matches an <a> that is a direct child of <nav>, ignoring one nested inside another element in between.

Do all CSS properties inherit from a parent element to its children?

No. Text-related properties like color and font-family inherit by default, so setting them on a container affects text inside it. Box-model properties like margin, padding, and border do not inherit — each element needs them set explicitly, or it renders with none.

Given `div { color: red; } div p { color: blue; }` and `<div><p>Text</p></div>`, what color does the text render, and why?

Blue. Both rules match the paragraph — one by matching div (and inheriting to its child) and one by directly targeting p inside a div — but div p is a more specific selector (two type selectors vs. one), so it wins the cascade.

You change a CSS property on an element but nothing visibly happens — what are the likely mechanisms?

Either a more specific (or later, equally specific) rule elsewhere is overriding it, the property doesn't apply to that element's display type (like vertical-align on a block element), or the stylesheet change hasn't actually loaded — for example due to caching or a wrong file path.

What's a pseudo-class, like `:hover` or `:first-child`, and how is it different from a regular selector?

A regular selector matches based on an element's static properties — its tag, class, or id. A pseudo-class matches based on a state or position that can change or depend on context, like being currently hovered, being the first child of its parent, or being a form field that's currently invalid.

A `<link rel="stylesheet">` is in the page, but none of its styles seem to apply — what would you check?

Whether the href path actually resolves (a typo or wrong relative path is the most common cause), whether the file is being served with a CSS-compatible response, whether a browser cache is serving a stale/empty version, and whether the rules inside it are simply being overridden by more specific rules loaded elsewhere.

Why is a shared stylesheet generally better than inline styles for keeping a site's typography consistent?

A shared stylesheet defines a rule once — say, p { font-size: 16px; } — and every paragraph on every page that loads it picks up that value automatically. With inline styles, the same value has to be repeated on every single element, so keeping them consistent means finding and updating every occurrence by hand.