Color, font, size, and other styles can be applied to an element using the HTML style attribute.
Example :
<!DOCTYPE html>
<html>
<body>
<p>I am normal text</p>
<p style="color:red;">I am red text</p>
<p style="color:blue;">I am blue text</p>
<p style="font-size:50px;">I am big text</p>
</body>
</html>
Output:
The style attribute can be used to change the appearance of an HTML element.
The syntax for the HTML style attribute is as follows:
Syntax for style:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
The CSS background-color property specifies the colour of an HTML element's background.
Example:
Set the background color for a page to grey:
<!DOCTYPE html>
<html>
<body style="background-color:grey;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output :
Example :
Set background color for two different elements:
<!DOCTYPE html>
<html>
<body>
<body>
<h1 style="background-color:red;">This is a heading</h1>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</body>
</html>
Output :
An HTML element's text colour is defined using the CSS colour property:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Output :
The font-family property in CSS specifies the type of font to use for an HTML element:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
Output :
The font-size property in CSS determines the size of text in an HTML element:
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:100%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
An HTML element's horizontal text alignment is defined via the CSS text-align property:
Example :
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
Output: