Topics

HTML Styles

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>

Try with example

Output:

 

The HTML Style Attribute

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.

 

Background color

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>

Try with example

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>

Try with example

Output :

 

Text Color

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>

Try with example

Output :

 

Fonts

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>

Try with example

Output :

 

Text Size

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>

Try with example

 

Text Alignment

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>

Try with example

Output: