What are the different ways to include CSS in HTML?

Including CSS in HTML

CSS (Cascading Style Sheets) can be included in HTML documents in several ways. Each method has its use cases and affects how styles are applied and maintained.

Ways to Include CSS

1
Inline CSS: Apply styles directly to an HTML element using the style attribute.
2
Internal CSS: Define styles within a <style> element inside the <head> section of the HTML document.
3
External CSS: Link to an external .css file using the <link> element with rel="stylesheet".

Example Usage

In short: Use inline CSS for quick, one-off styles, internal CSS for page-specific styles, and external CSS for reusable styles across multiple pages.

Difficulty: 5/10

Topics: CSS Loading Performance, Critical CSS, Asset Bundling

Scenario Questions

0-2 years experience

1
Imagine you're building a simple landing page and you want to change the background color of a single button. You could write a style tag in the head, put it inline on the button, or link an external stylesheet. How would you decide which one to use for this specific button, and what happens if you use all three with conflicting colors?
2
We have a bug where a page flashes unstyled content (FOUC) for a split second before the styles kick in. The styles are currently loaded using @import inside a <style> tag. Why is this happening, and how would you change how the CSS is included to fix it?

2-5 years experience

1
We are optimizing our site's Core Web Vitals, specifically First Contentful Paint. Currently, we have one massive main.css file linked in the <head>. How would you restructure how we include our CSS to get the critical above-the-fold styles to the user faster without waiting for the entire stylesheet to download?
2
You're working on a shared component library. Some developers want to use inline styles via style props, others want to import scoped CSS files, and some want to use CSS-in-JS. From a browser rendering and caching perspective, what are the tradeoffs of these different delivery methods when these components are rendered on a high-traffic page?

5-8 years experience

1
We're migrating a legacy multi-page application to a modern single-page app. The legacy app has global stylesheets loaded via <link> tags, but we want to move to a component-driven CSS strategy (like CSS Modules or CSS-in-JS). How would you design the CSS delivery strategy to prevent style leakage, manage bundle sizes, and ensure we aren't loading unused CSS on initial page load?
2
In a server-side rendered (SSR) React application, we are seeing a performance bottleneck where the HTML is sent, but the page looks completely unstyled until the client-side JS hydrates. How would you configure the CSS delivery (e.g., critical path CSS extraction vs. JS-injected styles) to ensure a seamless, fast visual load?

8+ years experience

1
Our organization has 50+ micro-frontends managed by different teams, all composed into a single shell application. We are facing severe performance degradation due to duplicate CSS being loaded, style collisions, and massive layout shifts during runtime integration. How would you architect a unified CSS distribution and loading strategy across these teams that balances developer autonomy with strict performance budgets?
2
We are planning a multi-year migration of a massive enterprise platform from a monolithic Sass setup to a modern utility-first (Tailwind) or CSS-in-JS architecture. How would you design the migration path to allow both systems to coexist safely in production without doubling our CSS payload or causing visual regressions, and how would you measure the success of this migration?

Follow-up Questions

❓How does the browser prioritize downloading CSS compared to JS?
❓What happens to the DOM and CSSOM parsing when the browser encounters a `<link rel='stylesheet'>` in the middle of the body?
❓If you have a massive CSS file, how would you split it to improve First Contentful Paint (FCP)?