codescracker


html

HTML Styles



« Previous Tutorial Next Tutorial »


Here you will learn how to style HTML elements using style attribute.

You can use following attributes to style the text in an HTML document:

From the above, the background-color is used to set background color, font-family is used to set text fonts, color is used to set text color, text-align is used to set text alignment, and font-size is used to set text size.

Here is the general form to style HTML elements:

style="property:value"

From the above code fragment, property is a CSS property and value is a CSS value.

HTML Style to Change Background Color

As we know that the default background color is white, therefore here is an example shows how to change the background color of a web page:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Styles Example</title>
</head>
<body style="background-color:black;color:white;">

<p>Change background and text color using style attribute</p>
<p>To change the background color of whole page, use your style attribute
inside the body tag.</p>
<p>You can use background-color to change the background color.</p>
<p>Use the color to change color of the text.</p>

</body>
</html>

Here is the sample output produced by the above HTML Style to change background color example code:

html styles

HTML Style to Change Text Color

As we know that the default text color is black, therefore here is an example shows how to change color of text in a web page.

<!DOCTYPE html>
<html>
<head>
	<title>HTML Style Example</title>
</head>
<body>

<p style="color:red;">This is HTML Style Example (red colored)</p>
<p style="color:green;">This is HTML Style Example (green colored)</p>
<p style="color:blue;">This is HTML Style Example (blue colored)</p>
<p style="color:purple;">This is HTML Style Example (purple colored)</p>
<p style="color:cyna;">This is HTML Style Example (cyan colored)</p>
<p style="color:yellow;">This is HTML Style Example (yellow colored)</p>

</body>
</html>

Here is the sample output of the above HTML style to change text color example code:

html text color

HTML Style to Change Text Fonts

You can use HTML font-family property to specify the font of an HTML element. Here is an example shows how to change text font in HTML:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Style Example</title>
</head>
<body>

<p style="font-family:verdana">This is HTML Style Example (verdana)</p>
<p style="font-family:courier">This is HTML Style Example (courier)</p>

</body>
</html>

Here is the sample output of the above HTML style to change text fonts example code:

html text fonts

HTML Style to Change Text Size

You can use HTML font-size property to specify the text size of an HTML element. Here is an example shows how to change text size in HTML:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Style Example</title>
</head>
<body>

<p style="font-size:110%">This is HTML Style Example (160%)</p>
<p style="font-size:20px;">This is HTML Style Example (20px)</p>
<p style="font-size:1em;">This is HTML Style Example (2em)</p>

</body>
</html>

Here is the sample output of the above HTML style to change text size example code:

html text size

HTML Style to Change Text Alignment

HTML text-align property defines the horizontal text alignment of an HTML element. Here is an example shows how to change text alignment in HTML:

<!DOCTYPE html>
<html>
<head>
	<title>HTML Style Example</title>
</head>
<body>

<p style="text-align:right;">This is HTML Style Example (right)</p>
<p style="text-align:center;">This is HTML Style Example (center)</p>
<p style="text-align:left;">This is HTML Style Example (left)</p>

</body>
</html>

Following is the sample output produced by the above HTMl style to change text alignment example code:

html text alignment

To learn more and in detail about styling HTML elements, then refer to CSS Tutorial.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test