CSS can be embedded, inline, or external. Teams standardize on external files for maintainability; embedded CSS is perfect for tutorials and quick experiments.
Three ways to apply styles
- External stylesheet —
<link rel="stylesheet" href="/css/app.css">inhead. Best for production sites. - Embedded —
<style>inhead(what this playground uses). - Inline —
style="..."on one element. Use sparingly for one-off overrides.
Order and cascade
Multiple stylesheets apply in link order. Later rules compete with earlier ones; then specificity and source order decide the winner.
File organization habit
base.css— resets, typography, colors.layout.css— page regions, grid/flex shells.components.css— buttons, cards, forms.
Start flat; split when a file becomes hard to navigate—not on day one.
Practice
The demo defines .btn in embedded CSS. Duplicate the rule with a different background and watch which one wins when specificity is equal (last rule wins).
Important interview questions and answers
- Q: Why prefer external CSS files?
A: Caching, reuse across pages, and cleaner HTML diffs in code review. - Q: Does inline CSS participate in the cascade?
A: Yes, and it often beats stylesheet rules unless `!important` or higher specificity intervenes. - Q: Where should `` go?
A: Typically in `head` so the browser discovers styles early.