Home >>HTML Tutorial >HTML Styles

HTML Styles

HTML Styles

HTML style is used to add the style on Existing Element. It helps to provide a better look to the web page. You can use style in any HTML tag.

Syntax:<tagname style= "property: value" >

Text Color

By using CSS color property, you can change the color of the text as you want that is displayed to the web page.

Let's take an example of text color:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;">This is a heading</h1>
<p style="color:orange;">This is a paragraph.</p>
</body>
</html>
Output:

This is a heading

This is a paragraph.

Background Color

By using CSS background-color property, you can change the background-color for a HTML element that is displayed to the web browser.

Let's take an example of Background color:

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:green; color:#fff;">PHPTPOINT</h1>
</body>
</html>
Output:

PHPTPOINT

Text Size

You can change the size of the text, by using the property font-size to the specified element.

Let's take an example of text size:

<!DOCTYPE html>
<html>
<body>
<p>Normal Text</p>
<p style="font-size:22px;">Text with font-size property. </p>
</body>
</html>
Output:

Normal Text

Text with font-size property.

Fonts

By using the property font-family you can change the font of the specified HTML element that can be displayed to the web page.

Let's take an Example of Fonts:

<!DOCTYPE html>
<html>
<body>
<p>Normal Text</p>
<p style="font-family:CASTELLAR;">Text with font-family property. </p>
</body>
</html>
Output:

Normal Text

Text with font-family property.

Text Alignment

Text-align property helps you to align the text left, right or center. You can Horizontally move the HTML elements. By default text is displayed to the left.

Let's take an Example of Text Alignment:

 <!DOCTYPE html>
<html>
<body>
<p>Normal Text</p>
<p style="text-align:center;">Text with text-align:center property. </p>
<p style="text-align:right;">Text with text-align:right property. </p>
</body>
</html>
Output:

Normal Text

Text with text-align:center property.

Text with text-align:right property.