Cascading Style Sheets (CSS) let you transform boring HTML into beautiful, engaging webpages. As one of the core web technologies, CSS is a must-have skill for aspiring developers.
In this expert guide, we’ll compare the 3 main types of CSS:
- Inline CSS – single HTML element rules
- Internal CSS – single HTML page styles
- External CSS – reusable CSS files
Understanding how these types of CSS differ in purpose, usage and performance will help you write professional websites.
By the end, you‘ll know how to select the right CSS approach for any project. Let‘s dive in!
Introduction to Different Types of CSS
First, what exactly is CSS and why does it matter?
CSS controls the presentation and layouts of web pages. Without CSS, every site would be a boring wall of text and headers. No colors, fonts, shapes or alignments of any kind!
Thankfully, by linking CSS to our HTML we can style all aspects of how users will experience content.
And CSS comes in several forms:
Inline CSS directly sets styles on individual elements using a style attribute.
Internal CSS contains CSS rules inside an HTML page using <style> tags.
External CSS moves all CSS code into a separate .css file that‘s linked to HTML pages.
The choice depends on managing complexity and being able to update code efficiently:
- Inline works for quick edits but is tough to scale
- Internal handles some complexity but still gets messy fast
- External modularizes things for easier maintenance
Let‘s now explain each CSS type more thoroughly, including best practices.
Getting Specific With Inline CSS
Inline CSS enables setting a style attribute directly on an HTML tag:
<p style="color: yellow;">I am yellow!</p>This will uniquely color that one paragraph yellow.
You‘ve specified CSS straight in the opening <p> tag. This makes inline CSS ideal for quick exceptions without an extra stylesheet.
Some examples of using inline CSS:
- Changing one word‘s color
- Highlighting important text
- Testing style ideas before moving them to a stylesheet
- Overriding external CSS values on specific elements
According to Harry Roberts, a leading CSS expert, inline CSS is best for those "one-off, dynamic values that external CSS can’t contain".
For example, notices might highlight warnings in red inline rather than in external stylesheets:
Inline CSS enables precise color changes without editing multiple files
When to Avoid Inline CSS
However, Lea Verou — an authority on web standards — warns against abusing inline styles.
She advises using CSS classes instead, which we‘ll cover more in the external CSS section. Classes allow styling elements without repetitively coding inline attributes.
Repeated inline styles bloat documents and become difficult to update across pages. Even inline CSS pros recommend limiting it to around 5-10 uses per page for performance.
Beyond that threshold, switch to internal or external CSS instead.
Internal CSS for Single Page Sites
Internal CSS places all CSS code inside an HTML page. Unlike inline, it works by adding a <style> element instead:
<head>
<style>
p {
font-size: 15px;
color: blue;
}
</style>
</head>Now you can create scoped styling rules for the whole page in one place!
Use internal CSS to:
- Design coherent styling for a single page app
- Avoid extra HTTP requests that external CSS requires
- Rapidly build CSS without additional files
Plus, internal CSS offers unique control since it loads before external CSS. This way you can override any external values as needed per page.
Let‘s see internal CSS optimization in action:
<!-- index.html -->
<head>
<link rel="stylesheet" href="main.css">
<style>
p {
color: navy; /* Overrides paragraph colors from main.css */
}
</style>
</head>Here internal CSS modifies the <p> color just for index.html. External changes won‘t apply because of its higher priority during page render.
You define internal CSS in the <head> to ensure HTML can access it. Elsewhere may fail or cause poor performance.
Avoid Bloating a Single Page
Be careful not to overuse internal CSS, warms Chris Coyier of CSS-Tricks. This can "quickly bloat individual pages", especially if you copy/paste styles.
Instead, Chris recommends centralizing common rules into external CSS or classes. Then use internal CSS minimally for page-specific cases.
For example, you might have one main stylesheet shared across all pages using:
/* main.css */
body {
font-family: Arial;
}
p {
color: blue;
}And then define special styles for only the About page with:
<!-- About.html -->
<style>
p {
color: orange; /* about page paragraphs only */
}
</style>This keeps the unified site CSS reusable while customizing where essential.
Now that you know how inline and internal CSS work, let‘s check out the most popular approach…
External CSS Files for Complete Control
External CSS offers the best flexibility out of the 3 styles. This method uses a separate .css file to contain all styles.
For example:
/* styles.css */
body {
font-family: Arial;
}
p {
color: blue;
font-size: 20px;
} You link the above stylesheet from any HTML page using:
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>This cleanly separates structure (HTML) from presentation (CSS).
It also makes site-wide brand consistency a breeze to manage! Changing one color var in the CSS automatically applies everywhere that stylesheet is added.
Some key benefits that make external CSS the gold standard:
- Reusability – Define universal styles once to reuse hundreds of times
- Maintainability – Edit code in one place to update sitewide appearance
- Flexibility – Craft CSS for any flavor (BEM, SMACSS, OOCSS)
- Caching – Host CSS externally to improve page load performance
Let‘s analyze the performance difference of external CSS files compared to internal CSS…
| Metric | Internal CSS | External CSS |
|---|---|---|
| HTTP Requests | 0 | 1+ per stylesheet |
| Cached by Browser | No | Yes |
| Page Weight | Higher | Lower |
| Maintenance | High Effort | Low Effort |
Benchmark of internal CSS vs external CSS page load differences
Based on the above, external CSS has slower initial page load due to the HTTP roundtrip.
However, once the file caches, subsequent page loads become much faster! Under 1kb of locally stored CSS is quicker than 10kb+ of CSS bloating your HTML.
Over 90% of websites use external CSS for these compelling advantages.
Best Practices for External CSS Files
When building stylesheets, experts recommend:
- Break into logical partials like typography.css and components.css
- Document extensively with comments for other developers
- Set root colors, fonts, etc as vars for easy updating
- Minify CSS files before production to reduce size
- Enable compression with gzip for faster transfers
This makes scaling maintainable through clear organization and efficient delivery.
Additionally, consider a CSS methodology like BEM to write cleaner external CSS as things grow. This adds meaning through naming conventions for CSS classes.
Some examples:
/* Using BEM methodology */
.product { }
.product__price { }
.product--onSale { }Now your styling remains obvious even for complex pages!
Key Takeaways on CSS Types:
We‘ve covered the differences between inline, internal and external CSS. To quickly recap:
Inline CSS works great for small one-off styling needs but doesn‘t scale well. Avoid overusing it.
Internal CSS handles styles for a single page efficiently without extra files. But prevent it from becoming bloated.
External CSS delivers the best performance, reusability and maintainability due to being cacheable and separate. This is why it‘s most popular for complete websites!
No matter your next project, keep these pointers in mind when working with CSS. Your future self will thank you!
For more pro tips on mastering CSS, check out resources from Harry Roberts, Lea Verou and Chris Coyier.
Thanks for reading and happy styling!
