HTML enumerates nodes in the DOM tree; CSS attaches style rules via selectors. No stylesheet can invent semantics—you must mark up content correctly first.
Linking stylesheets
<link rel="stylesheet" href="/assets/app.css">- Place links in
headfor early discovery; usemediaattributes for print or narrow contexts. - Multiple stylesheets cascade in link order before rule specificity runs.
Cascade overview
- Origin (user agent, user, author) and importance (
!important) decide precedence. - Specificity resolves conflicts among author rules.
- Source order breaks ties.
Authoring habits
- Name reusable patterns with classes (
.btn,.card) instead of over-nesting selectors. - Co-locate component markup + styles in frameworks when applicable.
- Avoid inline styles for anything repeated twice—promote to CSS.
JavaScript stays separate
Behavior layers on top: listeners query DOM nodes CSS styled. Keep concerns distinct even when bundlers merge files.
Rendered example — classes drive presentation
HTML provides structure; CSS classes provide appearance.
Frequent integration mistakes
- Ordering: render-blocking CSS in
head; default-defer scripts at end or withdefer—avoid flashes of unstyled markup when possible. - Globals: ad-hoc
.buttonselectors targeting broad tags cause regressions once another team ships different buttons. - Cascade debugging: “Why is this purple?” traces back to specificity + ordering—devtools show winning rule, humans must tidy sources.
Important interview questions and answers
- Q: When should you use `strong` vs `b`?
A: Use `strong` for semantic importance; use `b` only for stylistic offset without importance semantics. - Q: Why is `target="_blank"` usually paired with `rel="noopener"`?
A: It blocks the opened page from controlling the opener via `window.opener`, improving security. - Q: Why avoid fake buttons built with ``?
A: Anchors are for navigation; actions should use `
Tip: HTML carries meaning; CSS carries presentation—keep roles separate.