What is CSS? Why do we use it?
CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML elements on a web page. While HTML is used to define the structure and content of a webpage, CSS is responsible for how that content looks—its colors, fonts, spacing, positioning, responsiveness, and overall design.
- 1
To separate content (HTML) from design (CSS), making code cleaner and easier to maintain.
- 2
To apply consistent styling across multiple pages of a website.
- 3
To enhance the visual appearance of web pages with colors, layouts, fonts, and animations.
- 4
To support responsive design and ensure that web pages work on various devices and screen sizes.
- 5
To improve user experience by making interfaces more attractive and usable.
Scenario Questions
0-2 years experience
- 1We have a simple HTML page with a header, a paragraph, and a button. How would you use CSS to make the button have a blue background, white text, and a hover effect that darkens the background?
- 2If you add a CSS rule `p { margin: 0; }` but the paragraph still has space above it, what could be causing that and how would you fix it?
2-5 years experience
- 1You’re adding a new component to an existing web app and the styles you wrote are unexpectedly overriding styles from another component. How would you investigate and resolve the conflict?
- 2During a sprint, the design team asks for a responsive layout that switches from a two‑column grid to a single column on mobile. Walk me through how you’d implement this using CSS, and what pitfalls you’d watch out for.
5-8 years experience
- 1Our product team wants a theming system where we can switch between light and dark modes without rebuilding the app. How would you design the CSS architecture to support this at scale?
- 2We have a large codebase with many CSS files, and we’re seeing increased page load times due to duplicated selectors. What strategies would you employ to refactor the CSS and improve performance?
8+ years experience
- 1The company is migrating a legacy monolithic front‑end to a component‑based framework that uses CSS‑in‑JS. What are the architectural considerations and migration steps you’d propose to ensure style consistency and maintainability across teams?
- 2Across multiple product lines, we need a unified design system that can be versioned and consumed by different services. How would you structure the CSS (or style tokens) and tooling to enable cross‑team collaboration and future evolution?
Follow-up Questions
- Can you walk me through a recent CSS specificity bug you fixed?
- When would you choose a preprocessor like SASS over plain CSS?
- What metrics do you monitor to assess CSS impact on page load and render time?