HTML Styles

The style attribute is used to change the style of HTML elements.

This text is in Verdana and red
This text is in Times and blue
This text is 30 pixels high

Try It Yourself

HTML's style attribute

The role of the style attribute:

It provides a universal method to change the style of all HTML elements.

Styles were introduced in HTML 4 as a new preferred way to change the style of HTML elements. With HTML styles, you can directly add styles to HTML elements using the style attribute, or indirectly in a separate style sheet (CSS file).

You can find all the information you need about styles and CSS in our CSS TutorialLearn all about styles and CSS.

In our HTML tutorial, we will use the style attribute to explain HTML styles to you.

Disapproved tags and attributes

In HTML 4, there are several tags and attributes that have been deprecated. Deprecated means that these tags and attributes will not be supported in future versions of HTML and XHTML.

The message conveyed here is clear: avoid using these deprecated tags and attributes!

You should avoid using the following tags and attributes:

Tag Description
<center> Define centered content.
<font> and <basefont> Define HTML font.
<s> and <strike> Define strikethrough text
<u> Define underlined text
Attribute Description
align Define the alignment of text
bgcolor Define background color
color Define text color

For the above tags and attributes: use styles instead!

HTML Style Example - Background Color

The background-color attribute defines the background color for an element:

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

Try It Yourself

The style attribute has deprecated the "old" bgcolor attribute.

Try It Yourself: The Old Method of Setting Background Color

HTML Style Example - Font, Color, and Size

The font-family, color, and font-size properties define the font family, color, and font size of the text within an element, respectively:

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

Try It Yourself

The style attribute has deprecated the old <font> tag.

Try It Yourself: The Old Method of Setting Font

HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of the text within an element:

<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>

Try It Yourself

The style attribute has deprecated the old "align" attribute.

Try It Yourself: The Old Method of Center Alignment