Beginner: CSS Fundamentals
beginner: css fundamentals css fundamentals — 25 interview questions with traps, follow-ups, and production context. practice out loud; staff loops
Introduction
CSS Fundamentals — 25 interview questions with traps, follow-ups, and production context. Practice out loud; staff loops reward trade-offs, not definitions.
Business problem
Business pressure: Product teams need CSS Fundamentals interview questions to ship polished UI without layout regressions, accessibility lawsuits, or LCP regressions that hurt conversion.
- Conversion: Visual polish and performance directly affect checkout and signup funnels.
- Brand: Inconsistent CSS Fundamentals interview questions implementation fragments design system trust.
- Velocity: CSS debt slows every feature team — architecture matters at scale.
Why this feature exists
Platform history: CSS evolved CSS Fundamentals interview questions to solve author needs without JavaScript layout engines or table hacks.
- Problem solved: Declarative styling separated from document structure.
- Rejected alternative: Inline styles and JS layout — unmaintainable at enterprise scale.
Browser rendering perspective
Rendering impact: CSS Fundamentals interview questions affects style recalculation, layout, paint, and composite stages in the browser pipeline.
- Chrome (Blink): Style → LayoutNG → Paint → Viz compositor.
- Firefox (Gecko): Servo-based stylo + WebRender compositing.
- Safari (WebKit): WebKit style resolver + GPU layer promotion rules.
Internal browser workflow
Workflow: Selector match → cascade → computed values → layout tree → paint layers → composite.
Real production example
Production: Netflix, Amazon, and Shopify enforce CSS Fundamentals interview questions patterns via design tokens, lint rules, and visual regression CI.
Enterprise use case
Enterprise: Design systems (Polaris, Carbon, Atlassian) codify CSS Fundamentals interview questions in token pipelines and component APIs.
Accessibility considerations
A11y: CSS must not remove focus visibility, break zoom, or convey state by color alone (WCAG 2.2).
Performance considerations
Performance: CSS Fundamentals interview questions can trigger reflow, expensive selectors, or layer explosion — profile with DevTools Performance panel.
SEO considerations
SEO: CSS affects LCP, CLS, and mobile usability — ranking signals tied to Core Web Vitals.
Scalability considerations
Scale: CSS Fundamentals interview questions choices compound across micro-frontends, white-label tenants, and dark-mode variants.
Common production issues
Production failures: Specificity wars, z-index stacks, and responsive breakpoints that work in Chrome but break Safari.
Debugging guide
Debug: Chrome DevTools → Elements (computed styles), Layout panel, Rendering layers, Coverage for unused CSS.
Interview questions
What is CSS and what problem does it solve?(Beginner)
CSS separates presentation from HTML structure so teams can style many pages consistently without inline presentation attributes. Interview trap: saying CSS is 'only for colors' misses layout, accessibility, and performance impact on rendering pipelines.
Follow-up: How does CSS relate to HTML semantics?
Name three ways to include CSS in a document.(Beginner)
External stylesheet (link rel=stylesheet), internal style block, and inline style attribute. Best practice is external for caching. Trap: inline styles win specificity wars and don't scale.
Follow-up: Which method is best for Core Web Vitals?
What is a CSS rule?(Beginner)
A rule is selector { declarations } where declarations are property: value pairs. Invalid declarations are ignored per spec — trap: one bad property does not invalidate the whole rule.
Follow-up: What happens if you typo a property name?
What is the difference between a class and an id selector?(Beginner)
Class (.name) can repeat; id (#name) should be unique per page for semantics and a11y. Trap: id selectors have higher specificity — overusing ids makes overrides painful.
Follow-up: Why avoid styling many elements by id?
What does cascade mean?(Beginner)
Cascade resolves conflicting declarations by origin, importance, specificity, and source order. Trap: 'last rule always wins' ignores specificity and !important.
Follow-up: What beats a class selector?
What is inheritance in CSS?(Beginner)
Some properties (color, font-family) inherit from parent to children; others (margin, padding) do not. Trap: assuming all properties inherit causes layout surprises.
Follow-up: Does margin inherit?
What is the universal selector?(Beginner)
* selects all elements. Used sparingly in resets. Trap: * { margin: 0 } in large apps can break third-party widgets and form controls.
Follow-up: Why not use * in production resets blindly?
What is a pseudo-class?(Beginner)
Pseudo-classes like :hover, :focus, :first-child select elements in a state or position. Trap: :focus and :focus-visible differ — removing outlines affects keyboard users.
Follow-up: Difference between :hover and :focus?
What is a pseudo-element?(Beginner)
Pseudo-elements like ::before, ::after create decorative subtrees — content property required for many uses. Trap: using ::before for essential content hurts screen readers.
Follow-up: When should content be real DOM instead?
What units are px, em, rem, and %?(Beginner)
px absolute; em relative to element font-size; rem relative to root; % relative to parent on many properties. Trap: em nesting compounds — prefer rem for spacing tokens.
Follow-up: When is em still appropriate?
What is box-sizing: border-box?(Beginner)
Width includes padding and border — predictable layout. Trap: not setting globally then mixing content-box causes width math bugs.
Follow-up: Should you use * { box-sizing: border-box }?
What is display: none vs visibility: hidden?(Beginner)
display:none removes from layout and accessibility tree (usually); visibility:hidden hides visually but keeps layout space. Trap: display:none on focusable elements removes keyboard access.
Follow-up: Which is better for accessible toggles?
What is inline vs block display?(Beginner)
Block starts new line and takes full width; inline flows in text line. Trap: width/height ignored on inline elements — use inline-block or block.
Follow-up: Can you set width on a span?
What is the difference between link and @import?(Beginner)
link loads in parallel early; @import blocks and serializes — bad for performance. Trap: @import inside CSS is an anti-pattern for critical path.
Follow-up: Why do performance guides ban @import?
What is a CSS comment?(Beginner)
/* comment */ — cannot nest like JS. Trap: unclosed comment breaks rest of stylesheet silently.
Follow-up: Do comments affect bundle size?
What is invalid CSS handling?(Beginner)
Browsers ignore unknown properties/values and continue parsing. Trap: relying on unsupported values without @supports causes silent failure.
Follow-up: How do you feature-detect CSS?
What is user agent stylesheet?(Beginner)
Browser default styles (h1 bold, margins on body). Trap: forgetting resets/normalize causes cross-browser inconsistency.
Follow-up: Normalize vs reset — difference?
What is author stylesheet?(Beginner)
Styles from site developer — lower origin than user !important in some cases but usually wins over UA. Trap: confusing author vs user styles in debugging.
Follow-up: What is origin in cascade?
What does !important do?(Beginner)
Raises declaration priority within author styles. Trap: !important as default creates undebuggable specificity arms race.
Follow-up: When is !important acceptable?
What is source order?(Beginner)
When specificity equal, later rule wins. Trap: importing files in wrong order changes behavior without specificity change.
Follow-up: How do CSS Modules affect order?
What is a declaration block?(Beginner)
Curly-brace enclosed list of property: value pairs. Shorthand expands to longhands — trap: partial shorthand resets unspecified longhands.
Follow-up: Does margin shorthand reset all sides?
What is a selector list?(Beginner)
Comma-separated selectors sharing same block — one invalid selector can invalidate entire rule in older parsers; modern forgiving selector list helps.
Follow-up: a, , b — what happens?
What is the difference between stylesheet and inline style?(Beginner)
Inline style attribute has high specificity and no cache benefit. Trap: React style={{}} for everything duplicates cascade problems.
Follow-up: When is inline style OK?
What is CSS syntax for custom properties?(Beginner)
Custom properties (--token: value) inherit and cascade — they're variables, not constants. Trap: thinking var() fails silently without fallback.
Follow-up: What does var(--x, fallback) do?
What is the @charset rule?(Beginner)
Declares stylesheet encoding — must be first bytes if used. Trap: BOM vs @charset confusion in build pipelines.
Follow-up: Does UTF-8 need @charset?
Hands-on exercise
Mock interview drill: Answer all 25 questions out loud in 45 minutes. Record yourself explaining trade-offs, not just definitions.
Try it yourself
Edit the CSS panel — the preview updates live. Use DevTools Performance and Accessibility panels to validate.