CSS can be applied to HTML in three main ways: Inline, Internal, and External. Each method has its own purpose, advantages, and limitations. Understanding when to use each one is important for writing clean and efficient code.
Inline CSS
Inline CSS is applied directly inside an HTML element using the style attribute. It is useful for quick styling or testing changes, but it is not recommended for large projects.
Example
<p style="color: red; font-size: 16px;">This is inline CSS</p>
Advantages
Easy to use and quick for small changes
Does not require a separate file
Disadvantages
Makes code messy and hard to read
Not reusable across multiple elements
Difficult to maintain in large websites
Internal CSS
Internal CSS is written inside a style tag within the head section of an HTML document. It is used when styling a single page.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body><p>This is internal CSS</p></body>
</html>
Advantages
Keeps styles in one place within the page
Better organization than inline CSS
Disadvantages
Works only for one page
Cannot be reused across multiple pages
Increases page size
External CSS
External CSS is written in a separate file with a .css extension and linked to the HTML document. This is the best and most commonly used method.
Example
HTML file
<link rel="stylesheet" href="style.css">
CSS file
p {
color: green;
font-size: 20px;
}
Advantages
Reusable across multiple pages
Keeps HTML clean and organized
Easy to maintain and update
Improves website performance
Disadvantages
Requires an additional file
Needs proper linking to work
Conclusion
Inline CSS is best for small, quick changes. Internal CSS is suitable for single-page designs. External CSS is the best choice for professional websites because it keeps code clean, reusable, and easy to manage.