The HTML Style Attribute

The style attribute lets you add CSS styles directly to an HTML element. This changes how it looks.

1. Change Text Color

Use color to change text color:

<p style="color: red;">This text is red.</p>

2. Change Font Size

Use font-size to make text bigger or smaller:

<p style="font-size: 24px;">Big text</p>

3. Change Background Color

Use background-color to add a background color:

<p style="background-color: yellow;">Yellow background</p>

4. Add Border

Use border to add a border around text or element:

<p style="border: 2px solid blue; padding: 5px;">Text with border</p>

5. Text Alignment

Use text-align to align text:

<p style="text-align: center;">This text is centered</p>

6. Padding & Margin

Use padding for inner space, margin for outer space:

<p style="padding: 10px; margin: 20px; border: 1px solid black;">Text with padding and margin</p>

7. Font Family

Use font-family to change the font:

<p style="font-family: Arial, sans-serif;">This text uses Arial font</p>

8. Text Decoration

Use text-decoration for underline or line-through:

<p style="text-decoration: underline;">Underlined text</p>

9. Combine Multiple Styles

You can write many styles in one style attribute, separated by semicolons:

<p style="color: white; background-color: blue; font-size: 20px; padding: 10px;">
  Styled text with multiple properties
</p>

Next Lesson → HTML Text Formatting

Previous Lesson → HTML Links