🎯 Definition: HTML Style Attribute
The style attribute lets you apply CSS properties directly to a single HTML element.
It looks like this:
<tagname style="property:value;">
Example:
<p style="color: blue;">This text is blue!</p>
🧱 Structure Breakdown:
| Part | Meaning |
|---|---|
| style | The attribute name |
| property | The CSS property you want to change (e.g., color) |
| value | The value assigned to that property (e.g., blue) |
Example with multiple styles:
<p style="color: red; font-size: 20px; text-align: center;">
Stylish paragraph here!
</p>
Output:
🎨 Common Style Properties Used Inline:
| Property | Description | Example |
|---|---|---|
| color | Text-color | style="color: green;" |
| background-color | Background-color | style="background-color: yellow;" |
| font-size | Font size | style="font-size: 22px;" |
| font-family | Font type | style="font-family: Verdana;" |
| text-align | Allignment of text | style="text-align: right;" |
| border | Border Design | style="border: 2px solid black;" |
| margin | Space outside element | style="margin: 10px;" |
| padding | Space inside element | style="padding: 15px;" |
⚠️ Pro Tips & Best Practices:
- ✅ Great for quick testing or one-time tweaks.
- ❌ Not ideal for big projects — clutters your HTML and makes updates painful.
- 🔁 Use external CSS for consistency and scalability.
🌈 Example in Full:
<!DOCTYPE html>
<html>
<head>
<title>Style Attribute Example</title>
</head>
<body style="background-color: lightgray;">
<h1 style="color: navy; text-align: center;">Inline Styling Example</h1>
<p style="font-size: 18px; color: darkgreen;">
This paragraph uses the HTML <b>style</b> attribute to look fancy!
</p>
</body>
</html>
Output of the code is:
