Tutorials
THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML Styles

HTML Styles

I am red

I am blue

Try it Yourself

The HTML Style Attribute

 

The style of an HTML element can be set up by using the style attribute.

The HTML style attribute consists of the following syntax:

Example

<tagname style="property:value;">

The property is known to be a CSS property. The value is known to be a CSS value.

You will be learning more about CSS later in this tutorial.

HTML Background Color

 

The background-color property is used to define the HTML element's background color.

This example illustrates how to set a page background color to powderblue:

Example

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
Try it Yourself

HTML Text Color

 

The color property is used to define the text color which is used for an HTML element:

Example

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Try it Yourself

HTML Fonts

 

The font-family property is used to define the font which is used for an HTML element:

Example

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Try it Yourself

HTML Text Size

 

The font-size property is used to define the text size for an HTML element:

Example

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Try it Yourself

HTML Text Alignment

 

The text-align property is used to define the horizontal text alignment used for an HTML element:

Example

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Try it Yourself

Chapter Summary

 
  • how to utilise the style attribute inorder to style the HTML elements
  • how to utilise background-color for background color
  • how to utilise color for text colors
  • how to utilise font-family for text fonts
  • how to utilise font-size for text sizes
  • how to utilise text-align for text alignment

Test Yourself with Exercises