HTML Styles

In HTML Styles are very matter. When you see the different webpages you see different page styles, font styles and different types of styles. After this session you will learn that how to change the styles of fonts , page and everything.

Example

I am Red

I am Blue

I am Big

Try it Yourself »


The HTML Style Attribute

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

The HTML style attribute has the following syntax:

<tagname style=”property:value;“>

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

You will learn more about CSS later in this tutorial.


HTML Background Color

The background-color property defines the background color for an HTML element.

This example sets the background color for a page 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 defines the text color 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 defines the font to be 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 defines 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 defines the horizontal text alignment 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

  • 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

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »  Exercise 6 »

Leave a Reply