How to Add CSS to HTML
Learn different methods to apply CSS styles to your HTML documents
Methods for Adding CSS
CSS can be added to HTML documents in 3 ways:
- Inline CSS - by using the
style
attribute inside HTML elements - Internal CSS - by using a
<style>
element in the<head>
section - External CSS - by using a
<link>
element to link to an external CSS file
Inline CSS
How It Works
Inline CSS is applied directly to HTML elements using the style
attribute. This method has the highest specificity.
<p style="color:red;">This is a paragraph.</p>
Note: Inline CSS is not recommended for large projects as it mixes content with presentation and is difficult to maintain.
Example
This is a heading
This is a paragraph.
When to Use:
- Quick testing or prototyping
- When you need to override other styles
- For single-use styles that won't be reused
Internal CSS
How It Works
Internal CSS is defined within the <style>
element, inside the <head>
section of an HTML page.
<html>
<head>
<style>
body { background-color: linen; }
h1 { color: maroon; margin-left: 40px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Example
This is a heading
This is a paragraph.
When to Use:
- Single-page websites
- When styles are specific to one page
- Small projects with minimal styling
Note: Internal CSS is better than inline but still mixes content with presentation for multi-page websites.
External CSS
How It Works
With external CSS, you link to an external .css file. This is the most common and recommended method.
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }
Example
This is a heading
This is a paragraph.
Advantages:
- Separation of concerns (content vs presentation)
- Easier maintenance and updates
- Faster page loading after initial cache
- Consistent styling across multiple pages
When to Use:
- Multi-page websites
- Large projects
- Professional web development
- When you need consistent styling across pages
CSS @import Rule
How It Works
The @import
rule allows you to import one CSS file into another CSS file.
/* main.css file */ @import url("navigation.css"); @import url("content.css"); @import url("footer.css"); body { font-family: Arial, sans-serif; }
Note: The @import
rule must be at the top of the document, before any other rules.
Example Usage
You can also use @import
within a <style>
tag:
<style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); body { font-family: 'Roboto', sans-serif; } </style>
Best Practices:
- Use for organizing large CSS codebases
- Import Google Fonts or other external resources
- Limit the number of @import calls to avoid performance issues
CSS Precedence Order
Which style applies when multiple styles conflict?
Priority | Method | Description |
---|---|---|
1 (Highest) | Inline CSS | Styles applied directly to HTML elements |
2 | Internal CSS | Styles defined in the <style> tag |
3 | External CSS | Styles from external .css files |
4 (Lowest) | Browser Defaults | Default styles applied by the web browser |
Example of Precedence:
p { color: blue; }
<!-- Internal CSS -->
<style> p { color: green; } </style>
<!-- Inline CSS -->
<p style="color: red;">What color will this text be?</p>
The text will be RED because inline CSS has the highest priority.
Best Practices
Do's
- Use external CSS for multi-page websites
- Organize your CSS with comments and sections
- Use consistent naming conventions (like BEM)
- Minify CSS for production to improve loading times
- Use CSS variables for consistent theming
- Follow a mobile-first approach for responsiveness
Don'ts
- Avoid inline styles except for quick testing
- Don't use too many !important declarations
- Avoid overly specific selectors when possible
- Don't mix different methods without a clear strategy
- Avoid using internal CSS for large projects
- Don't forget to test across different browsers
Performance Considerations
- External CSS files are cached by browsers, improving load times for subsequent pages
- Too many @import statements can slow down page loading
- CSS should be placed in the <head> to prevent FOUC (Flash of Unstyled Content)
- Consider critical CSS for above-the-fold content to improve perceived performance