Learn HTML Styles



Learn HTML easily online

And web development

Completely free

Try yourself >>

Part 1

HTML Style Attribute

In HTML we use the style attribute to determine the styling of an element, such as font, color, size etc:

This is the syntax of style attribute: < tagname style="property : value;">

In this example the < tagname will be paragraph , the property will be color, the value will be green

Code Example:

                 <p style="color:green;"></p>
Try yourself >>

Learn more about styling in our CSS tutorial >>

Part 2

Learn about Text Size

CSS font-size property determine the text size of an HTML element:

Code Example:

                     <p style="font-size:30px;">Jack Sparrow</p>
<p style="font-size:60px;">Is a pirate</p>
Try yourself >>

You can also use % instead of pixels:

Code Example:

                     <p style="font-size:300%;">Jack Sparrow</p> 

Part 3

Learn about Background Colors

The CSS background-color property determine the color of an HTML element background:

Code Example:

                     <body style="background-color:purple;">
Try yourself >>

Part 4

Learn about Fonts

We can select specific text font using the font-family property:

Code Example:

                    <h1 style="font-family:Serif;">Jack</h1>
<h1 style="font-family:Monospace;">Sparrow</h1>
Try yourself >>

Part 5

Learn about Text Color

You can control the text color of an HTML elemenet using the color property:

Code Example:

                    <h1 style="color:red;">Jack</h1>
<h1 style="color:purple;">Sparrow</h1>
Try yourself >>

Learn more about styling in our CSS tutorial >>

Part 6

Learn about Text Alignment

You can place text in different locations such as center, right, left, justify using the text-align property

Code Example:

                     <p style="text-align:left;">Jack Sparrow</p>
<p style="text-align:center;">Jack Sparrow</p>
<p style="text-align:right;">Jack Sparrow</p>
<p style="text-align:justify;">Jack Sparrow</p>
Try yourself >>

center Centers the content.

right Aligns the content to the right side.

left Aligns the content to the left side.

justify - If possible, both the left and right sides are aligned by adjusting the width of the content. For example, the width of a line of text can be adjusted by varying the word spacing.

FreeCodeWiki best site for learning html and css, enjoy this complete html course, learn responsive web development with html5 & css3 for beginners and experts