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.
<p style="color: red;">This is a paragraph.</p>2. Internal CSS
Defined inside the <style> tag within the <head> section.
<style>
p {
color: blue;
}
</style>3. External CSS
Written in a separate .css file and linked to HTML.
<link rel="stylesheet" href="styles.css">styles.css file
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 |
<!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>Output
Browser Output
- First paragraph will appear in red color (inline CSS)
- Heading will appear in blue color (internal CSS)
- Second paragraph will appear in green color (external CSS, if styles.css is linked properly)
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
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.
