CSS Types
CSS can be applied to HTML documents in different ways. These methods are called CSS Types.
What are CSS Types?
CSS types define where and how CSS code is written and applied to HTML elements. There are three main types of CSS.
1. Inline CSS
Inline CSS is written directly inside an HTML element using the
style attribute.
Example 1: Inline CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 style="color: red;">Inline CSS Example</h2>
</body>
</html>
Output
Inline CSS Example
Explanation:
• CSS is applied directly to the element
• Affects only that specific element
• Not recommended for large projects
• CSS is applied directly to the element
• Affects only that specific element
• Not recommended for large projects
2. Internal CSS
Internal CSS is written inside the <style> tag,
usually placed inside the <head> section.
Example 2: Internal CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>internal</title>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Internal CSS Example</p>
</body>
</html>
Output
Internal CSS Example
Explanation:
• Styles apply to the entire page
• Written inside the HTML file
• Useful for single-page designs
• Styles apply to the entire page
• Written inside the HTML file
• Useful for single-page designs
3. External CSS
External CSS is written in a separate file with a .css extension
and linked to the HTML document.
Example 3: External CSS
/* style.css */ <-External File
h1 {
color: green;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>External CSS Example</h1>
</body>
</html>
Output
External CSS Example
Explanation:
• Styles are reusable across multiple pages
• Keeps HTML clean and organized
• Best practice for real websites
• Styles are reusable across multiple pages
• Keeps HTML clean and organized
• Best practice for real websites
Important Notes
✔ Inline CSS has the highest priority
✔ External CSS is recommended for large projects
✔ Use Internal CSS only when needed
✔ External CSS is recommended for large projects
✔ Use Internal CSS only when needed
Frequently Asked Questions (FAQ)
Which CSS type is best?
External CSS is best because it is reusable, clean, and easy to maintain.
Can I use all CSS types together?
Yes. Inline, internal, and external CSS can be used together in one page.
Which CSS type has highest priority?
Inline CSS has the highest priority, followed by internal and external CSS.