Selectors & Text: Hero Title + Lead + Emphasis (Interview Warm-up)

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

Style a small hero header using both element and class selectors. Establish base typography on element selectors, then override specific parts with classes for emphasis and hierarchy. This checks selector targeting, cascade behavior, and readable type scale for a real UI snippet.

Solution

Overview

Use element selectors to set the baseline rhythm across the hero (font size, line-height, margin, and color). Then apply class selectors for targeted emphasis like a muted tagline or a highlighted word. This demonstrates clean cascade usage, minimal specificity, and intentional visual hierarchy without over-nesting selectors or relying on ids.

Approach — Base Elements + Targeted Class Overrides

First, style h1 and p directly to create the default typography system: size, line height, spacing, and base color. Next, apply a .tagline class to soften contrast or weight for secondary copy so hierarchy is visible. Finally, wrap the emphasized word in a span with .highlight to raise contrast or weight. Keep selectors flat so later overrides remain predictable and maintainable.

<html>

<h1 class='headline'>
  Welcome to CSS Basics
</h1>
<p class='tagline'>
  CSS lets you style
  <span class='highlight'>
    text
  </span>
  , layouts, and more.
</p>

# CSS

h1 {
  font-size: 2rem;
  margin: 0;
  color: #111;
}
p {
  margin: 0.5rem 0 0;
  line-height: 1.6;
  color: #333;
}
.tagline {
  color: #555;
}
.highlight {
  color: #3b82f6;
  font-weight: 600;
}

Notes & Pitfalls

Pitfalls

Only using classes and skipping element selectors defeats the point of the exercise.
Forgetting to reset default margins often causes unexpected spacing in real UIs.
If you style `p` color but never override `.tagline`, you miss the specificity/override practice.

Techniques

Use element selectors for baseline typography and layout rhythm.
Use classes for component-level overrides and emphasis.
Keep overrides minimal so the cascade stays predictable.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep