You are currently viewing HTML Styling | Lesson 09 HTML Tutorial
HTML Style image

HTML Styling | Lesson 09 HTML Tutorial

In This lesson you will learn how to add the basic styles to html elements, and we will learn the deep styling later in specific lesson.

HTML Styling Video

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:

<HTML_TAGNAME style="property:value;">

Note: The property is a CSS property. The value is a CSS value.

here is some example:

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:

 <body>
<h1  style="background-color:powderblue;">This is a powerblue heading</h1>
<p style="background-color:red;">This is a red paragraph.</p>
</body> 

HTML Fonts

The font-family property defines the font to be used for an HTML element.

Example:

 <h1 style="font-family:Tahoma;">This is a 'Tahoma' font heading</h1>
<p style="font-family:courier;">This is a 'courier' font family paragraph.</p> 

HTML Text Size

The font-size property defines the text size for an HTML element.

Example:

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

Note: When we use the size with percentage it will be responsive with the device size we use

HTML Text Color

The color property defines the text color for an HTML element:

Example:

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

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> 

Note: The previous example will put the text in the center of the screen.


This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

Leave a Reply