CSS Introduction
How to Add CSS
Compare inline, internal, and external CSS, then choose the method that keeps styles reusable, cacheable, and maintainable.
CSS can be added to HTML documents in different ways to style web pages. Choosing the right method depends on the project size and requirements.
There are three main ways to add CSS:
- Inline CSS
- Internal CSS
- External CSS
Each method has its own use case and advantages.
Syntax
1. Inline CSS
Applied directly inside an HTML element using the style attribute. The supporting concepts are explained in CSS Syntax and CSS Element Selector.
html
<p style="color: red;">This is a paragraph.</p>2. Internal CSS
Defined inside the <style> tag within the <head> section.
html
<style>
p {
color: blue;
}
</style>3. External CSS
Written in a separate .css file and linked to HTML.
html
<link rel="stylesheet" href="styles.css">styles.css file
css
p {
color: green;
}Attributes
| Method | Description | Usage Level |
|---|---|---|
| Inline CSS | Applied directly to individual elements | Small changes |
| Internal CSS | Defined within the same HTML file | Single page design |
| External CSS | Stored in separate file and reused | Large projects |
Choose a maintainable source
External stylesheets are usually the best default because multiple pages can share and cache them. Internal styles are useful for isolated documents or critical page-specific rules. Inline styles have the narrowest reuse and interact with the cascade at high priority, so reserve them for values genuinely supplied by the element or application rather than routine component styling.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>How to Add CSS</title>
<!-- Internal CSS -->
<style>
h1 {
color: blue;
}
</style>
<!-- External CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Inline CSS -->
<p style="color: red;">This is inline CSS</p>
<h1>This is internal CSS</h1>
<p>This is external CSS</p>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| CSS stylesheets | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Inline CSS has the highest priority
- Internal CSS is useful for single-page styling
- External CSS is the best practice for large websites
- External CSS improves performance and maintainability
- Multiple CSS methods can be used together, but priority rules apply
Conclusion
Understanding how to add CSS is essential for controlling the appearance of web pages. While all three methods are useful, external CSS is the most recommended approach for scalable and maintainable web development.