HTML Tutorial: HTML Styles
Learn how to style text using colors, fonts, sizes & alignment
HTML styles are added using the style attribute.
The style attribute uses:
property : value ;
1️⃣ Change Text Color
INPUT (Colored Code):
<p style="color:red;">
This text is red.
</p>
OUTPUT (Browser Result):
This text is red.
✔️ color changes text color ✔️ You can use red, blue, green, or hex codes (#ff0000)
2️⃣ Change Background Color
INPUT:
<p style="background-color:yellow;">
Yellow background text
</p>
OUTPUT:
Yellow background text
✔️ background-color changes background
3️⃣ Change Font Size
INPUT:
<p style="font-size:30px;">
Big Text
</p>
OUTPUT:
Big Text
✔️ font-size controls text size ✔️ px = pixels
4️⃣ Change Font Family
INPUT:
<p style="font-family:Courier;">
Courier Style Text
</p>
OUTPUT:
Courier Style Text
✔️ font-family changes text style ✔️ Examples: Arial, Courier, Times New Roman
5️⃣ Align Text
INPUT:
<p style="text-align:center;">
Centered Text
</p>
OUTPUT:
Centered Text
✔️ text-align values: left, center, right
6️⃣ Multiple Styles Together
INPUT:
<p
style="color:white; background-color:black; font-size:25px; text-align:center;"
>
Styled Text
</p>
OUTPUT:
Styled Text
✔️ You can combine many styles ✔️ Separate each style with semicolon (;)
🎯 Important Notes
- Style attribute is written inside opening tag
- Syntax = property : value ;
- Multiple styles separated by ;
- Later you will learn CSS for better styling
🚀 What’s Next?
👉 HTML Text Formatting
Next you will learn:
- Bold text
- Italic text
- Underline text
- Marked text
- Small text
Styles make your webpage beautiful and attractive.