CSS
How Many Types of CSS? A Complete Guide
CSS (Cascading Style Sheets) is a fundamental technology used to style web pages. It allows developers to control the appearance of HTML elements by defining styles such as colors, fonts, layouts, and animations.
There are three main types of CSS used in web development, each with its own advantages and use cases.
1. Inline CSS
Inline CSS is applied directly within an HTML tag using the style attribute.
Example:
<p style="color: blue; font-size: 18px;">This is an inline CSS example.</p>
Advantages:
✔ Quick and easy to apply
✔ No need for an external stylesheet
Disadvantages:
✖ Hard to maintain for large projects
✖ Cannot be reused across multiple elements
✅ Best Used For: Small styling changes or when you need to override other styles quickly.
2. Internal (Embedded) CSS
Internal CSS is written inside the <style> tag within the <head> section of an HTML document.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is an internal CSS example.</p>
</body>
</html>
Advantages:
✔ Keeps styles organized within the same HTML file
✔ Useful for single-page designs
Disadvantages:
✖ Cannot be reused across multiple pages
✖ Increases HTML file size
✅ Best Used For: Styling a single HTML page or when an external stylesheet is unnecessary.
3. External CSS
External CSS is written in a separate .css file and linked to an HTML document using the <link> tag.
Example:
styles.css (External CSS file)
p {
color: red;
font-size: 22px;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is an external CSS example.</p>
</body>
</html>
Advantages:
✔ Allows reusability across multiple pages
✔ Keeps HTML files clean and organized
✔ Improves website performance by caching styles
Disadvantages:
✖ Requires an extra file, increasing HTTP requests
✖ Styles won’t load if the CSS file is missing
✅ Best Used For: Large projects where multiple pages share the same styles.
Other Types of CSS
Apart from the three main types, there are additional CSS techniques that enhance styling and functionality.
4. CSS-in-JS
Used in JavaScript frameworks like React, CSS-in-JS allows you to write CSS inside JavaScript files.
Example (Styled Components in React)
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px;
`;
export default Button;
✔ Useful for component-based styling in JavaScript frameworks.
Comparison of CSS Types
| CSS Type | Location | Reusability | Best Use Case |
|---|---|---|---|
| Inline CSS | Inside HTML tag | ❌ No | Small, quick fixes |
| Internal CSS | Inside <style> tag in HTML | ❌ No | Single-page styling |
| External CSS | Separate .css file | ✅ Yes | Large projects |
| CSS-in-JS | Inside JavaScript files | ✅ Yes | JavaScript frameworks |
Conclusion
The choice of CSS type depends on the project size, complexity, and maintainability.
💡 For best practices:
- Use external CSS for scalable and maintainable websites.
- Use inline CSS only for quick fixes.
- Use internal CSS when working with a single-page project.
- Use CSS-in-JS when developing with modern JavaScript frameworks.