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.
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:
Note: The property is a CSS property. The value is a CSS value.
here is some example:
HTML Background Color
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>
font-family property defines the font to be used for an HTML element.
<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
font-size property defines the text size for an HTML element.
<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
color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a blue heading</h1> <p style="color:red;">This is a red paragraph.</p>
HTML Text Alignment
text-align property defines the horizontal text alignment for an HTML element.
<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/