Types of CSS
CSS can be applied to HTML in three main ways: Inline, Internal, and External. Each method has its own use cases, advantages, and limitations.
1. Inline CSS
Inline CSS is used to apply a unique style directly to a single HTML element using the
style attribute.
<p style="color: red;
font-size: 18px;">
This is a red paragraph.</p>
Use Case: Quick, one-time styling for specific elements.
Drawback: Difficult to maintain and not reusable.
2. Internal CSS
Internal CSS is written inside a <style>
tag within the <head> section of the HTML document.
<head>
<style>
p {
color: green;
font-size: 20px;
}
</style>
</head>
Use Case: When styling a single HTML document.
Drawback: Not reusable across multiple pages.
3. External CSS
External CSS is written in a separate file with a .css extension and linked using the <link> tag.
<head>
<link rel="stylesheet"
href="styles.css">
</head>
The styles.css file:
p {
color: blue;
font-size: 22px;
}
Use Case: Ideal for styling multiple pages consistently.
Advantage: Cleaner code and easy maintenance.
Conclusion
Understanding the types of CSS helps you choose the right method for different scenarios. While inline and internal CSS are useful for small-scale or specific tasks, external CSS is best for larger, maintainable projects.