CSS for Beginners: Selectors, the Cascade and the Box Model

What does CSS add to HTML?

Gammal Tech offers a CSS course alongside HTML. Knowing the relevant HTML structure makes it easier to understand which elements your selectors affect.

Style one card

* {
  box-sizing: border-box;
}

.card {
  max-width: 40rem;
  margin-inline: auto;
  padding: 1.25rem;
  border: 1px solid #bfd8d3;
  border-radius: 0.75rem;
  color: #142c34;
  background: #f6f9f8;
}

.card h2 {
  margin-block-start: 0;
}

Apply the card class to a suitable section in your HTML. The rule gives it a border, internal spacing and a maximum readable width. The heading rule removes an unwanted top margin within that card.

Keep the content unchanged while experimenting. This lets you see the effect of one CSS change rather than confusing a content edit with a styling change.

Understand the box model

With border-box sizing, declared dimensions include padding and border. Margins remain outside. This makes some layout calculations easier, but it does not remove the need to understand the surrounding layout.

Why does one rule win?

The cascade resolves competing declarations through factors including origin, importance, layers where used, specificity and order. For ordinary rules in the same context, a more specific selector can outrank a less specific one; when the relevant priorities tie, later declarations can win.

Do not solve every conflict by adding important declarations. Inspect which rule applies and simplify the competing selectors. A small consistent naming approach is easier to maintain than increasingly complicated overrides.

Debug one property at a time

Use the browser's developer tools to inspect the element and its computed styles. Ask whether the selector matches, whether another declaration overrides it and whether the layout context changes the effect.

If a card seems too wide, check width, padding, border and box sizing together. If text is unreadable, inspect contrast and font size rather than changing margins randomly.

A controlled practice task

Create two cards using the same class. Change the shared spacing once and confirm that both update. Then add a clearly named variation for one card and explain which property differs.

Check narrow screens, text enlargement and keyboard focus. Your goal is a page whose visual rules you can explain. Continue with responsive layout only after you can identify which selector and declaration control the result you are looking at.