The HTML style attribute is used to apply styles to HTML element, such as background color, font color/text color, fonts, font size, and alignment etc.

The HTML Style Attribute

To set the style of an HTML element, with the help of style attribute.

syntax:

<tagname style=”property1:value1; property2:value2;”>

The tagname is any HTML element like header tags, paragraph tag etc., Style is an attribute in which list of property’s, each property stores specified value assigned with colon (:) and each property its value separated by semicolon (;). that is enclosed double quote marks (“ “). Property is a CSS property. The value is a CSS (Cascading Style Sheet) value.

1. Background-Color

The CSS background-color property setting the background color for an HTML element that is <Body> tag.

Example

Set the background color to yellow color:

<body style=”background-color:yellow;”>
<h1>Background color is Yellow</h1>
<p>The Background color property used to set the background color of the page</p>
</body>

2. Text Color

The CSS color property setting the text color for various HTML elements.

Example

<h1 style=”color:blue;”>This is a Text Color</h1>
<p style=”color:red;”>This paragraph applied to font color is Red </p>

3. Fonts

The CSS font-family property setting the font to be used for an HTML element:

Example

<h1 style=”font-family:Times new roman;”>This is a font-family property to set the fonts</h1>
<p style=”font-family:Arial;”>This is a paragraph to set the Arial Font.</p>

4. Text Size

The CSS font-size property setting the text size for an HTML element. Value should be either numeric or percentage.

Example

<h1 style=”font-size:24;”>This is a heading with size 24</h1>
<p style=”font-size:200%;”>This is a paragraph with size 200%.</p>

5. Text Alignment

The CSS text-align property setting the horizontal text alignment for an HTML element. Here assigned values are left/right/center.

Example

<h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:right;”>This paragraph setting with horizontal text alignment</p>

Another CSS property is text-valign setting the vertical text alignment for an HTML element. Here assigned values are top/middle/bottom.

Note: CSS used to style attribute for add styles to HTML elements but without Style attribute also defines styles such as background-color for bgcolor attribute; text-align for align and valign attribute. And font color for color attribute, fonts for font-family attribute and Text size for size attribute within the <font> tag;

working as Lecturer in Computer Application at Nagarjuna Govt. College, Nalgonda since 10years