Way to use of CSS
- Siddharth Sharma
- Mar 1, 2025
- 2 min read
1. Inline CSS
Inline CSS is applied directly to an HTML element using the style attribute. It is useful for quick, one-off styling but is not recommended for large-scale projects due to poor maintainability.
Example:
html
<p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p>
<button style="background-color: green; color: white; padding: 10px;">Click Me</button>Pros: Easy to implement for small changes.
Cons: Hard to maintain, not reusable, and mixes content with presentation.
2. Internal CSS
Internal CSS is defined within a <style> tag in the <head> section of an HTML document. It applies styles to the entire document but is not reusable across multiple pages.
Example:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
p {
color: blue;
font-size: 16px;
}
button {
background-color: green;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal CSS.</p>
<button>Click Me</button>
</body>
</html>Pros: Good for single-page styling, keeps styles in one place.
Cons: Not reusable across multiple pages.
3. External CSS
External CSS is stored in a separate .css file and linked to the HTML document using the <link> tag. This is the most recommended approach for larger projects as it promotes reusability and maintainability.
Example:
Create a CSS file (e.g., styles.css):
css
/* styles.css */ p { color: blue; font-size: 16px; } button { background-color: green; color: white; padding: 10px; }
Link the CSS file in the HTML document:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>External CSS Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>This is a paragraph with external CSS.</p> <button>Click Me</button> </body> </html>
Pros: Reusable across multiple pages, separates content from design, and improves maintainability.
Cons: Requires an additional HTTP request to load the CSS file.
Summary:
Inline CSS: Use for quick, one-off styling.
Internal CSS: Use for single-page styling.
External CSS: Use for larger projects to ensure reusability and maintainability.
Each method has its use cases, but external CSS is generally the best practice for professional web development.
Comments