Styles

by Andy | August 20, 2010 1:02 am

The style attribute is used to style HTML elements.

Look! Styles and colors

This text is red

This text is blue

The HTML Style Attribute

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).

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

Deprecated Tags and Attributes

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!

These tags and attributes should be avoided:

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

For all of the above: Use styles instead!

HTML Style Example – Background 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.

HTML Style Example – Font, Color and Size

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>

A heading

A paragraph.

The style attribute makes the old <font> tag obsolete.

HTML Style Example – Text Alignment

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>

For more on this topic, read:

Beginning HTML, XHTML, CSS, and Javascript

Author: Jon Dockett
Chapter: 1 Structuring Docs for the Web
pages: 19-23

Source URL: http://andyrutter.com/html-styles/