Selectors, Classes and Why Inline Styles Bite You Later

Target elements with type, class and id selectors, put CSS in a stylesheet, and stop stuffing style= on every tag. After this, one change updates every matching element.

5 min HTML and CSS Web Development Testing and Debugging Beginner

Skip ahead: If you already put shared styles in a .css file and select with classes instead of long inline style attributes, skip to "Why inline styles bite you later", then continue.

CSS only styles what you can select. Selectors are the address system. Classes are the addresses you should use most often.

Where CSS can live

External file (preferred): styles.css linked with <link rel="stylesheet" href="styles.css">.
<style> in the head: fine for tiny demos, messy for real sites.
Inline style="..." on a tag: highest urgency for one-off overrides; worst for maintenance.

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

Type, class and id selectors

/* type: every <p> */
p {
  line-height: 1.5;
}

/* class: only elements with class="note" */
.note {
  color: #626976;
}

/* id: the one element with id="total" */
#total {
  font-weight: 700;
}

<p>Regular paragraph.</p>
<p class="note">Delayed shipments post at 3pm.</p>
<p id="total">Total: ₱1,280</p>

Classes start with . in CSS and appear without the dot in HTML: class="note".
Ids start with # in CSS. One id value per page.
You can put multiple classes on one element: class="note urgent".

Combinators you will use early

/* descendant: spans inside .card */
.card span {
  font-size: 0.9rem;
}

/* child: only direct children */
.menu > li {
  display: inline-block;
}

Start simple. You do not need every combinator on day one.

Why inline styles bite you later

<!-- Fragile -->
<p style="color:#034bff;font-size:18px;margin-top:24px;">Promo</p>
<p style="color:#034bff;font-size:18px;margin-top:24px;">Another promo</p>

When the brand blue changes, you edit every tag. When you need the same look in a second page, you copy-paste mistakes. Put it in a class once:

.promo {
  color: #034bff;
  font-size: 1.125rem;
  margin-top: 1.5rem;
}

Inline styles also beat most stylesheet rules in the cascade, which makes debugging feel random until you notice style="".

⚠ Warning: Don't use !important to win against inline styles as a habit. Remove the inline style or move it to a class.

Common mistakes

Styling with ids everywhere. #header #nav #link becomes impossible to override. Prefer classes.
Class names that describe look only (blue-text). Prefer names that describe role (promo, hint, price) when you can.
Typos between HTML and CSS. .Note is not .note.

💡 Tip: Name classes in lowercase with hyphens: order-status. Avoid spaces in class names; spaces separate multiple classes.

What happens if you skip this

You will "fix" pages by stacking inline styles until nothing can be reused. The first redesign then costs a rewrite.

Move one inline colour from your practice page into .promo in styles.css. Change the hex once. Confirm both spots update.

Group selectors when the look is shared

h1, h2, h3 {
  font-family: system-ui, sans-serif;
  line-height: 1.25;
}

.btn, button {
  font: inherit;
}

Don't invent a unique class for every heading level if they share the same font stack.

Attribute selectors (lightly)

input[type="email"] {
  max-width: 20rem;
}

a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.85em;
}

Useful, but easy to overdo. Prefer a class when you control the HTML.

A cleanup pass

Search your HTML for style=. For each match, ask: will another element need this? If yes, make a class. If it is a one-off experiment, leave it — then delete it when the experiment ends.

About