Selectors, inheritance & typography

Style the right thing

Lesson 6 of 20 · 8 min · Module 2: A deliberate visual style

A selector describes which elements a rule should affect. Well-scoped rules let one component change without unexpectedly restyling the whole page.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Scope a selector to a component
Recognize inherited text styles
Set readable size and line height

The idea

A descendant selector like .notice p matches paragraphs inside .notice. Some text properties, including color, can be inherited. A directly applied rule can give one child its own style.

<style>
  .notice { color: #285b44; }
  .notice p { line-height: 1.8; }
</style>

01Read selectors from right to left

The p in .notice p identifies paragraphs; .notice limits those matches to descendants of a notice. It does not match every paragraph on the page.

02Understand competing declarations

The cascade considers origin, importance, layers, specificity, and order. For ordinary rules at the same level, a more specific matching selector wins; equal specificity is resolved by later source order.

Your turn

Give .notice a text color of #285b44. Set its paragraph to font-size: 16px and line-height: 24px. Keep the outside paragraph black (#000000).

What the checks look for

Notice text inherits green
Paragraph text is 16px
Line height is 24px
Outside text stays black

Try it in the editor →

Take this with you

Use the narrowest selector that expresses the component’s intended responsibility.