info@tutsfinder.in



HTML Styles



Stlye is an attribute pf HTML which is used to add styles to an element such as color, font, size, etc.

It provides easy and effective alternatives to specify various attributes for the HTML tags.


Syntax:
<tagname style = “property:value;”>

The property is a CSS property and the value is CSS value, you will learn more about CSS in CSS tutorial.



Below example showing background color of a page:
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:yellow;">I am yellow</p>
<p style="color:red;">I am red</p>
<p style="font-size:20px;">I am small</p>
</body>
</html>


The HTML Style Attribute

Text Color

It defines the text color of an element by using property color.



Below example showing background color of a page:
<!DOCTYPE html>
<html>
<body>

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


Background Color

It defines the background color of an element by using background-color property.



Below example showing background color of a page:
<!DOCTYPE html>
<html>
<body style="background-color:blue;">
<h1> This is a heading</h1>
<p> This is a paragraph.</p>
</body>
</html>


HTML Fonts

It defines which font is to be used by using font-family property.



Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:Calibri;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>


Text Alignment

It defines the text alignment by using the text-align property.



Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:left;"> Heading on left</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>


Text Size

It defines the text size of an element by using font-size property.



Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:200%;">This is a heading</h1>
<p style="font-size:150%;">This is a paragraph.</p>
</body>
</html>