What are the different ways to include CSS in HTML?

Difficulty: 5/10

CSS Loading Performance, Critical CSS, Asset Bundling

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 file using the element with .

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.

Scenario Questions

0-2 years experience

1Imagine 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?
2We 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?

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)?