HTML Styles

The HTML Style Attribute

The style attribute is a new HTML attribute. It introduces the use of CSS in HTML. The purpose of the style attribute is to provide a common way to style all HTML elements.

Styles were introduced with HTML 4 as the new and preferred way to style HTML elements. With HTML styles, formatting and attributes can be added to HTML elements directly by using the style attribute, or indirectly in separate Cascading Style Sheets (CSS files).

<html>
<title>style attribute</title>
<body style="background-color:#CCCCCC;">
<h1>Styles and colors</h1>
<p style="font-family:verdana;color:red"> This text is in Verdana and red</p>
<p style="font-family:times;color:green"> This text is in Times and green</p>
<p style="font-size:60px">This text is 60 pixels high</p>
</body>
</html>

Common HTML Styles

Background color

<body style="background-color:gray">
<h2>Look: Colored Background!</h2>

The new style attribute makes the “old” bgcolor attribute. as :

<html>
<title>style attribute</title>
<body bgcolor="gray">
<h2>Look: Colored Background!</h2>
<p>For future-proof HTML, use HTML styles instead:</p>
<p>style="background-color:gray"</p>
</body>
</html>

Font Family, Color, and Size

The style attribute defines a style for the <p> element. as shown below

<html>
<title>style attribute</title>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:courier new; color:red; fontsize:
20px;">A paragraph</p>
</body>
</html>

Text Alignment

<h1 style=”text-align:center”> The style attribute defines a style for the <h1> element. As shown below :

<html>
<title>center align</title>
<body>
<h1 style="text-align:center">Heading in center</h1>
</body>
</html>