HTML Styles

Beginner ⏱ 7 min read Updated: June 2026

HTML styles are used to change the appearance of HTML elements. With styles, you can modify text color, background color, font size, font family, text alignment, and many other visual properties. Styles make web pages attractive and easier to read.

HTML styles are applied using the style attribute.
Styles are written using CSS properties and values.
Styles control the appearance of HTML elements.
They help create visually appealing web pages.

What are HTML Styles?

The HTML style attribute is used to add inline CSS to an element. It allows you to change colors, fonts, spacing, alignment, and other visual aspects directly inside an HTML tag.

HTML Text Color

The CSS color property is used to change the text color.

Example

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

Result

This text is red.

HTML Background Color

The background-color property changes the background color of an element.

Example

<p style="background-color:yellow;">Highlighted text.</p>

Result

Highlighted text.

HTML Font Size

The font-size property is used to change the size of text.

Example

<p style="font-size:30px;">Large Text</p>

Result

Large Text

HTML Font Family

The font-family property specifies the font style of text.

Example

<p style="font-family:Verdana;">Styled text.</p>

Result

Styled text.

HTML Text Alignment

The text-align property controls the horizontal alignment of text.

Example

<p style="text-align:center;">Centered Text</p>

Result

Centered Text

Note: Although inline styles are useful for learning, modern websites usually use external CSS files to keep code organized.

Summary

HTML styles help control the appearance of web pages. Using the style attribute, you can change text color, background color, font size, font family, and alignment. Understanding HTML styles is an important step toward learning CSS and modern web design.

← Previous HTML Paragraph Next → HTML Formatting