CSS Basics: Selectors, the Box Model and the Cascade

If you’ve ever added “Additional CSS” in the WordPress Customizer and watched nothing happen, you’ve met the cascade. CSS is simple to start and full of surprises later. This guide explains the core concepts so you can read, write and debug styles with confidence.

How CSS is written#

/* selector   { property: value; } */
.ikp-btn--primary {
  background: #7ed957;
  color: #0b0d12;
  padding: 12px 22px;
  border-radius: 999px;
}

A rule has a selector (which elements), and declarations (what to change). Styles can live in an external stylesheet (best), a <style> block, or inline style="" attributes (avoid for anything reusable).

Selectors you’ll use daily#

The box model#

Every element is a rectangular box made of four layers: content, padding (space inside the border), border, and margin (space outside). By default, width applies only to the content box, so padding and border make elements wider than you expect. Almost every modern site starts with:

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

With border-box, a 300 px wide element stays 300 px wide including padding and border.

The cascade and specificity#

When several rules target the same element, the browser decides which wins in this order:

1. Importance: !important declarations beat normal ones (use rarely).
2. Specificity: inline style > ID > class/attribute/pseudo-class > element. .nav a (class + element) beats a.
3. Source order: if specificity is equal, the later rule wins.

Inheritance and the cascade in practice#

Some properties inherit from parents (colour, font, line-height); others don’t (margin, border, background). That’s why setting font-family on body styles the whole page. Modern CSS also has custom properties (variables) that inherit, which make theming and dark mode easy — see CSS variables and dark mode.

Layout in one minute#

• Normal flow: block elements stack vertically; inline elements flow in lines.
• Flexbox: one-dimensional layouts — navbars, button groups, centring. See Flexbox guide.
• Grid: two-dimensional layouts — card grids, page templates. See CSS Grid guide.
• Position: sticky headers, fixed chat buttons, absolute badges.

Debugging with DevTools#

1. Right-click an element → Inspect.
2. In the Styles panel, see every rule that applies; crossed-out declarations were overridden.
3. Edit values live to test changes before saving them in your theme.
4. Use the Computed tab to see final values and the box model diagram.

Where to add custom CSS in WordPress#

• Customizer → Additional CSS for small tweaks (stored in the database, survives theme updates).
• Child theme stylesheet for larger changes — see how to create a child theme.
• Block styles / Site Editor for block themes.
• Never edit a parent theme’s files directly — updates overwrite them.