HTML Styles

In this chapter, we will study the HTML style attribute in detail.

The style attribute is used on HTML elements to give them desired look and feel.

With the style attribute, we can modify the default view of an HTML element and its content.

Changing font, size, color, spacing etc is very easy with the style attribute.

Syntax
<tag style="property:value;">content</tag>

If an element is an empty element with no end tag, then:

Syntax
<tag style="property:value;">

Anyway, the style attribute is always applied to the start tag of an HTML element. Here it is important to note that the property is CSS property and the value is the CSS value.

Let's see an example of the style attribute.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML style Attribute Example</title> </head>
<!--Change Background Color-->
<body style="background-color:yellow;">

<!--The Normal Text-->
<p>HTML Learning at Result University is Easy.</p>

<!--Change Text Background Color-->
<p style="background-color:green;">HTML Learning at Result University is Easy.</p>

<!--Change Text Color-->
<p style="color:red;">HTML Learning at Result University is Easy.</p>

<!--Change Font-->
<p style="font-family:Arial;">HTML Learning at Result University is Easy.</p>

<!--Change Text Size -->
<p style="font-size:30px;">HTML Learning at Result University is Easy.</p>

<!--Change Text Alignment -->
<p style="text-align:center;">HTML Learning at Result University is Easy.</p>

</body>
</html>

Don't worry much about the CSS, we are going to learn it later in the tutorial.

HTML Change Background Color

The background color of an HTML element is changed by defining the CSS's background-color property in the style attribute.

Syntax
<tag style="background-color:value;">content</tag>

For example, to change the background color of the <body> element to the yellow color we will write the following code.

Code
<body style="background-color:yellow;">content</body>
Example
<!DOCTYPE html>
<html>
<head>
<title>Change Body Background Color</title> </head>
<!--Change Background Color-->
<body style="background-color:yellow;">

<!--The Paragraph Text-->
<p>HTML Learning at Result University is Easy.</p>

</body>
</html>

HTML Text Background Color

In the example below we have changed the background color of the text of the heading and the paragraph using the same HTML style attribute.

Code
<h1 style="background-color:lightblue;">content</h1>
<p style="background-color:lightgreen;">content</p>
Example
<!DOCTYPE html>
<html>
<head>
<title>Change Text Background Color</title> </head>
<body>

<!--Change Heading Text Background Color-->
<h1 style="background-color:lightblue;">HTML Learning at Result University is Easy</h1>

<!--Change Paragraph Text Background Color-->
<p style="background-color:lightgreen;">HTML Learning at Result University is Easy</p>

</body>
</html>

HTML Text Color

The text color of an HTML element can be changed using The CSS color property.

Syntax
<tag style="color:value;">content</tag>

Here value is the name of the color.

For example, to change the font color of a paragraph to red we will write the HTML code as follows:

Code
<p style="color:red;">content</p>
Example
<!DOCTYPE html>
<html>
<head>
<title>Change Text Color</title> </head>
<body>

<!--Change Heading Text Color-->
<h1 style="color:blue;">HTML Learning at Result University is Easy</h1>

<!--Change Paragraph Text Color-->
<p style="color:red;">HTML Learning at Result University is Easy</p>

</body>
</html>

HTML Change Font

To change the default font of an HTML element's content we use CSS font-family property with value as the name of the font in the style attribute.

Syntax
<tag style="font-family:value;">content</tag>

Here value is the name of the font.

For example, to change the font of a paragraph to Arial we will write the following HTML code.

Code
<p style="font-family:Arial;">content</p>
Example
<!DOCTYPE html>
<html>
<head>
<title>Change Text Font</title> </head>
<body>

<!--Change Heading Text Font-->
<h1 style="font-family:Arial;">HTML Learning at Result University is Easy</h1>

<!--Change Paragraph Text Font-->
<p style="font-family:Helvetica;">HTML Learning at Result University is Easy</p>

</body>
</html>

HTML Text Size

The size of the text of an HTML element can be increased or decreased by providing value to the CSS font-size property.

Syntax
<tag style="font-size:value;">content</tag>

To set the font size of a heading to 30 pixels, we need the following HTML code.

Code
<h1 style="font-size:30px;">content</h1>
Example
<!DOCTYPE html>
<html>
<head>
<title>Change Text Size</title> </head>
<body>

<!--Change Heading Text Size-->
<h1 style="font-size:30px;">HTML Learning at Result University is Easy</h1>

<!--Change Paragraph Text Size-->
<p style="font-size:50px;">HTML Learning at Result University is Easy</p>

</body>
</html>

HTML Text Alignment

The text alignment of an element can be changed left, right or to the center horizontally.

All we need to do is to provide the value in CSS text-align property in the style attribute.

Syntax
<tag style="text-align:value;">content</tag>

The HTML code for aligning paragraph text to center is as follows:

Code
<p style="text-align:center;">content</p>
Example
<!DOCTYPE html>
<html>
<head>
<title>Change Text Alignment</title> </head>
<body>

<!--Change Heading Text Alignment to Center-->
<h1 style="text-align:center;">HTML Learning at Result University is Easy</h1>

<!--Change Paragraph Text Alignment To Center-->
<p style="text-align:center;">HTML Learning at Result University is Easy</p>

<!--Change Heading Text Alignment to Right-->
<h1 style="text-align:right;">HTML Learning at Result University is Easy</h1>

<!--Change Paragraph Text Alignment to Right-->
<p style="text-align:right;">HTML Learning at Result University is Easy</p>

<!--Change Heading Text Alignment to Left-->
<h1 style="text-align:left;">HTML Learning at Result University is Easy</h1>

<!--Change Paragraph Text Alignment to Left-->
<p style="text-align:left;">HTML Learning at Result University is Easy</p>

</body>
</html>

  • Disclaimer: ResultUniversity.com is an independent private website and it is in no way affiliated to any Indian Government official website. The sole purpose of this website is to provide notifications regarding the latest results published. Though utmost care is being taken, we can not guarantee 100% correctness of information. Using this website confirms that you agree to all the terms and conditions.