Connect a stylesheet and understand the cascade

What you will build

Create a separate stylesheet, target elements, and use DevTools to see which declaration wins.

Understand the idea first

Selectors decide what matches; the cascade resolves conflicts.

Build it step by step

/* css/style.css */
:root {
  color-scheme: light;
}
body {
  color: #1f2937;
  background: #fffaf5;
}
.site-title {
  color: #c2410c;
}
header .site-title {
  color: #9a3412;
}

1. Create css/style.css.
2. Link it from every HTML page, adjusting relative paths for nested files.
3. Add class="site-title" to the main heading and verify the rule applies.
4. Use DevTools Styles to explain overridden declarations.

Read the important lines

• Selectors decide what matches; the cascade resolves conflicts.
• Classes are reusable styling hooks; avoid ids for routine styling.
• Confirm the file loaded before debugging specificity.

Common mistakes and what to check

Practice without copying

Add .nav-link to navigation, write a class rule and a header .nav-link rule, then predict the winner.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases