1.Inline CSS:
Inline CSS is applied directly to HTML elements using the style attribute.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sudhanshu Developer</title> </head> <body> <h1 style="color: blue; text-transform: uppercase;">Sudhanshu Developer</h1> <p style="font-size: 16px; color: gray;">This is an example of inline CSS.</p> </body> </html> 2.Internal CSS
Internal CSSis written inside a <style> tag within the <head> section.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sudhanshu Developer</title> <style> h1 { color: green; text-transform: uppercase; } p { font-size: 18px; color: darkgray; } </style> </head> <body> <h1>Sudhanshu Developer</h1> <p>This is an example of internal CSS.</p> </body> </html> 3.External CSS
External CSS is written in a separate .css file and linked using the <link> tag.
Step 1: Create a styles.css file
/* styles.css */ h1 { color: red; text-transform: uppercase; } p { font-size: 20px; color: darkblue; } Step 2: Link styles.css to your index.html file
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sudhanshu Developer</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Sudhanshu Developer</h1> <p>This is an example of external CSS.</p> </body> </html> Key Fixes & Improvements
✔ Proper indentation for better readability.
✔ Added meta viewport tag for responsiveness.
✔ Kept color names consistent (darkblue, darkgray, etc.).
✔ Clearly separated steps for external CSSto avoid confusion.
Conclusion
Now, you have learned three different ways to apply CSSto HTML:
- Inline CSS (Quick styling but hard to maintain)
- Internal CSS (Better structure but still embedded)
- External CSS (Best for maintainability and scalability)
Use External CSS for professional web development!
Top comments (0)