HTML - Styles
The style attribute is used to style HTML elements.
Look! Styles and colors
This text is in Verdana and
red
This text is in Times and
blue
This text is 30 pixels high
The purpose of the style attribute is:
To provide a common way to style all HTML elements.
Styles was introduced with HTML 4, as the new and preferred way to style HTML elements. With HTML styles, styles can be added to HTML elements directly by using the style attribute, or indirectly in separate style sheets (CSS files).
You can learn everything about styles and CSS in our
CSS Tutorial.
In our
HTML tutorial we will use the style attribute to introduce you to HTML styles.
In HTML 4, several tags and attributes are deprecated. Deprecated means that they will not be supported in future versions of HTML and XHTML.
The message is clear: Avoid using deprecated tags and attributes!
| Tags | Description |
| <center> | Defines centered content |
| <font> and <basefont> | Defines HTML fonts |
| <s> and <strike> | Defines strikethrough text |
| <u> | Defines underlined text |
| Attributes | Description |
| align | Defines the alignment of text |
| bgcolor | Defines the background color |
| color | Defines the text color |
The background-color property defines the background color for an element:
Example:
<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>
The style attribute makes the "old" bgcolor attribute obsolete.
The font-family, color, and font-size properties defines the font, color, and size of the text in an element:
Example:
<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>
The style attribute makes the old <font> tag obsolete.
The text-align property specifies the horizontal alignment of text in an element:
Example:
<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>
The style attribute makes the old "align" attribute obsolete.
