HTML Styles

HTML Styles

HTML styles are used to change the appearance of HTML elements. Styles are added using the style attribute, which uses CSS (Cascading Style Sheets).

Syntax of HTML Style

<tagname style="property:value;">

Example

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

Common HTML Style Properties

1. Text Color

<p style="color:blue;">Blue text</p>
<p style="color:green;">Green text</p>

2. Background Color

<p style="background-color:yellow;">
This paragraph has a yellow background.
</p>

3. Font Size

<p style="font-size:20px;">This text is 20px.</p>
<p style="font-size:30px;">This text is 30px.</p>

4. Font Family

<p style="font-family:Arial;">This text uses Arial.</p>
<p style="font-family:'Times New Roman';">
This text uses Times New Roman.
</p>

5. Text Alignment

<p style="text-align:left;">Left aligned</p>
<p style="text-align:center;">Center aligned</p>
<p style="text-align:right;">Right aligned</p>

6. Text Decoration

<p style="text-decoration:underline;">Underlined text</p>
<p style="text-decoration:line-through;">Strikethrough text</p>
<p style="text-decoration:none;">No decoration</p>

7. Font Weight (Boldness)

<p style="font-weight:bold;">Bold text</p>
<p style="font-weight:normal;">Normal text</p>

Multiple Styles in One Element

<p style="color:white; background-color:black; font-size:18px;">
Styled paragraph
</p>

 Styles on Headings

<h1 style="color:red; text-align:center;">
Welcome to HTML Styles
</h1>

Using Styles vs CSS (Best Practice)

❌ Inline style (not recommended for large projects):

<p style="color:red;">Hello</p>

✅ Better approach (using CSS):

<style>
p {
color: red;
}
</style>
<p>Hello</p>

Important Points to Remember

  •  styles are written using CSS properties

  • Inline styles are good for small examples

  • For real websites, use external CSS

  • HTML itself does not control design, CSS does

You may also like...