HTML Tutorial: HTML CSS
Learn how to style HTML using CSS: inline, internal, and external with colorful examples
CSS (Cascading Style Sheets) is used to style HTML elements. It controls colors, fonts, layouts, spacing and more.
1️⃣ Inline CSS
INPUT:
<p style="color:blue; font-size:18px;">
This text is blue and 18px
</p>
OUTPUT:
This text is blue and 18px
✔️ Inline CSS styles a single element ✔️ Quick but not reusable
2️⃣ Internal CSS
Internal CSS is added in the <head> section using <style>.
INPUT:
<!DOCTYPE html>
<html>
<head>
<style>
p { color: green; font-size: 20px; }
</style>
</head>
<body>
<p>This text is green and 20px</p>
</body>
</html>
OUTPUT:
This text is green and 20px
✔️ Internal CSS applies styles to multiple elements ✔️ Useful for single-page styling
3️⃣ External CSS
External CSS is saved in a separate .css file and linked using <link>.
INPUT:
/* style.css */
h1 { color: #ff6600; }
p { color: purple; font-size: 18px; }
<!-- index.html -->
<link rel="stylesheet" href="style.css">
<h1>Hello CSS</h1>
<p>This paragraph is purple</p>
OUTPUT:
Hello CSS
This paragraph is purple
✔️ External CSS is reusable across multiple pages ✔️ Best practice for large websites
4️⃣ Combining CSS Properties
INPUT:
<p style="color:white; background-color:#0077cc; padding:10px; border-radius:8px;"
>
Styled paragraph with blue background
</p>
OUTPUT:
Styled paragraph with blue background
✔️ Combine colors, padding, border-radius, font-size for modern styling
🎯 Best Practices
- Use external CSS for large projects
- Use internal CSS for single-page styling
- Use inline CSS sparingly for quick changes
- Always test styles across browsers
🚀 What’s Next?
👉 HTML Links
Next lesson will cover:
- Creating hyperlinks using
<a>tag - Internal and external links
- Link attributes (target, title, href)
CSS allows you to make your HTML visually attractive and improve user experience.