CSS Introduction Methods
CSS styles can be introduced into HTML documents in three ways: inline styles, internal styles, and external styles. Each method has its appropriate use cases.
<link>) are recommended. They completely separate HTML and CSS, allow browsers to cache CSS files, and improve loading speed when shared across multiple pages.
1. Inline Styles
Inline styles write CSS directly in the HTML tag's style attribute.
Example
<p style="color: red; font-size: 18px;">This text is red and 18 pixels</p>
<div style="width: 200px; height: 100px; background: blue;">
This is a blue box
</div>
Characteristics:
- Only affects the current element
- Highest priority (overrides styles defined by other methods)
- Cannot be reused, not suitable for large-scale use
- Suitable for quick testing or temporary adjustments
Use cases: Rarely used. May be used in scenarios requiring dynamic style changes via JavaScript.
2. Internal Styles
Internal styles write CSS inside the HTML document's <head> tag, wrapped in a <style> tag.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal Style Example</title>
<style>
p {
color: red;
font-size: 16px;
}
h1 {
color: blue;
text-align: center;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph text</p>
<p>This text has a highlighted background</p>
</body>
</html>
Characteristics:
- Styles are reusable within the current page (multiple elements can share)
- Structure and styles in the same file, convenient for single-page management
- Other pages cannot share these styles
- Suitable for single-page projects or learning exercises
3. External Styles (External Stylesheets)
External styles write CSS in a separate .css file, then use <link> tags to include it in HTML. This is the most commonly used method in actual development.
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External Style example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>This text's style comes from an external CSS file</p>
</body>
</html>
style.css file:
p {
color: red;
font-size: 16px;
line-height: 1.8;
}
Characteristics:
- Complete separation of structure and styles
- One CSS file can be shared across multiple pages
- Modifying one CSS file affects all pages that reference it
- Browsers can cache CSS files, improving loading speed
- This is the standard practice for enterprise-level development
@import Method (Just for awareness)
@import loads referenced files after the CSS file finishes loading, causing "flash of unstyled content" on the page. This method is largely obsolete in modern projects, replaced by <link>.
Besides the <link> tag, you can also use @import in CSS files to import other CSS files:
Example
<style>
@import url("reset.css");
@import url("layout.css");
p {
color: red;
}
</style>
<p>This is a paragraph example.</p>
But this method has worse performance than <link> tags and is not recommended.
Comparison of Three Methods
| Feature | Inline Styles | Internal Styles | External Styles |
|---|---|---|---|
| Reusability | Not reusable | Single-page reuse | Multi-page sharing |
| Structure/Style Separation | ❌ Completely mixed | ✅ Separated (same file) | ✅ Completely separated |
| Priority | Highest | Medium | Lowest |
| Loading Performance | No extra requests | No extra requests | Requires extra HTTP request |
| Recommended Level | ⭐ | ⭐⭐ | ⭐⭐⭐⭐⭐ |
Priority Rules
When all three methods appear simultaneously, the priority rule is:
Inline Styles > Internal Styles > External Styles
Note: This refers to the priority of inclusion methods, not selector specificity. Selector specificity is compared "within the same inclusion method," while inclusion method priority is only considered when styles from different methods conflict.
❓ FAQ
📖 Summary
- Each of the three inclusion methods has its purpose: inline styles are rarely used but have highest priority, internal styles suit small single-page projects, external styles are the mainstream choice for actual development
- Remember one principle: use external stylesheets whenever possible to maximize code reusability and maintainability
- In actual work, you'll often see projects with one or more CSS files included via
<link>tags
📝 Exercises
- Create an HTML file using inline, internal, and external methods to set different styles.
- Create an external
style.cssfile defining paragraph colors and heading styles, then include it in HTML. - On the same element, use all three methods to set the same property (like
color), observe which one takes effect, and verify the priority rules. - Modify colors in the
style.cssfile, refresh the browser to see changes, and experience the maintenance convenience of external styles.