CSS can be added to HTML in three different ways: Inline CSS, Internal CSS, and External CSS.
1. Inline CSS
Inline CSS is used to apply a unique style to a single HTML element. It is added directly within the HTML tag using the style attribute.
Example
<p style="color: red; font-size: 18px;">This is a paragraph with inline CSS.</p>When to Use
- For quick styling of individual elements
- For testing or temporary styles
- Not recommended for large projects or consistent styling
2. Internal CSS
Internal CSS is placed inside a <style> tag within the <head> section of the HTML document. It is used to style elements on a single page.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: Arial;
}
p {
color: gray;
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph styled with internal CSS.</p>
</body>
</html>When to Use
- For styling a single page
- When the styles are specific to that page only
3. External CSS
External CSS is stored in a separate .css file. This file is linked to the HTML document using the <link> tag inside the <head> section. It is the most efficient way to style multiple pages.
Example
HTML File (index.html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph styled with external CSS.</p>
</body>
</html>CSS File (styles.css)
h1 {
color: green;
text-align: center;
}
p {
color: black;
font-size: 18px;
}When to Use
- For consistent styling across multiple pages
- For keeping HTML and CSS separate and organized
- Recommended for all professional and large-scale websites
Summary
- Inline CSS is applied directly to an element using the style attribute.
- Internal CSS is written in a
<style>tag in the<head>section of the HTML. - External CSS is written in a separate
.cssfile and linked to the HTML document. - External CSS is the most preferred method for real-world web development.
