X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML Styles


I am Red

I am Blue


Try it Yourself »

HTML Formatting Elements

In the previous chapter, you learned about HTML formatting elements.

Formatting elements are special HTML elements with a special meaning.

Formatting elements were designed to display special types of text, like important text, emphasized text, subscripts, and superscripts.


HTML Styling

HTML styling has nothing to do with formatting elements.

Styling is about changing or adding the style of existing HTML elements.

Every HTML element has a default style (background color is white, text color is black ...)

Changing the default style of an HTML element, can be done with the style attribute.

Example

<body style="background-color:lightgrey">

<h1>This is a heading</h1>

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

</body>

Try it Yourself »

Note The bgcolor attribute, supported in older versions of HTML, is not valid in HTML5.


The HTML Style Attribute

The HTML style attribute has the following syntax:

style="property:value"

The property is a CSS property. The value is a CSS value.

Note You will learn much more about CSS later in this tutorial.


HTML Text Color

The color property defines the text color to be used for an HTML element:

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 it Yourself »


HTML Text Fonts

The font-family property defines the font to be used 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 it Yourself »

Note The <font> tag, supported in older versions of HTML, is not valid in HTML5.


HTML Text Size

The font-size property defines the text size to be used for an HTML element:

Example

<!DOCTYPE html>
<html>

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

</html>

Try it Yourself »


HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example

<!DOCTYPE html>
<html>

<body>
  <h1 style="text-align:center">Centered Heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

Try it Yourself »

Note The <center> tag, supported in older versions of HTML, is not valid in HTML5.


Chapter Summary

  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment

Examples

Try it Yourself Summary

HTML Styles Introduction

HTML Background Color

HTML Text Color

HTML Text Font

HTML Text Size

HTML Text Alignment


Test Yourself Exercises

Exercise 1 »    Exercise 2 »    Exercise 3 »    Exercise 4 »   



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook