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.<\/p>\n\n\n\n
Inline CSS<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
<p style=\"color: red; font-size: 16px;\">This is inline CSS<\/p><\/pre>\n\n\n\nAdvantages
Easy to use and quick for small changes
Does not require a separate file<\/p>\n\n\n\nDisadvantages
Makes code messy and hard to read
Not reusable across multiple elements
Difficult to maintain in large websites<\/p>\n\n\n\nInternal CSS<\/p>\n\n\n\n
Internal CSS is written inside a style tag within the head section of an HTML document. It is used when styling a single page.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
<\/style>
<\/head>
<body><p>This is internal CSS<\/p><\/body>
<\/html><\/pre>\n\n\n\nAdvantages
Keeps styles in one place within the page
Better organization than inline CSS<\/p>\n\n\n\nDisadvantages
Works only for one page
Cannot be reused across multiple pages
Increases page size<\/p>\n\n\n\nExternal CSS<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Example<\/p>\n\n\n\n
HTML file<\/p>\n\n\n\n
<link rel=\"stylesheet\" href=\"style.css\"><\/pre>\n\n\n\nCSS file<\/p>\n\n\n\n
p {
color: green;
font-size: 20px;
}<\/pre>\n\n\n\nAdvantages
Reusable across multiple pages
Keeps HTML clean and organized
Easy to maintain and update
Improves website performance<\/p>\n\n\n\nDisadvantages
Requires an additional file
Needs proper linking to work<\/p>\n\n\n\nConclusion<\/p>\n\n\n\n
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.<\/p>\n\n\n