Introduction
This chapter demonstrates about the HTML Style which is used to style the attributes for the html elements. Following are the concepts covered.
- Style Attributes
- Types of Styles
Description
Html Style attribute is used to style the html element. The below syntax show the style attribute of an html element.
[html]
style="property:value;"
[/html]
In the above syntax
The code below demonstrates the html styles.
[html]
<!DOCTYPE html>
<html>
<body>
<h2 style="color:red;">SPlessons</h2>
<h2 style="color:blue;">SPleessons</h2>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- property = CSS property.
- value = CSS value.
Description
Html styles used to generate the new styles to the html elements Following are the different styles of element.
HTML Background Color
In order to give the background coloring to the elements user need to use the background-color property the code is as shown below.
[html]
<!DOCTYPE html>
<html>
<body style="background-color:blue;">
<h1>SPlessons</h1>
<p>1st paragraph.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Fonts
In order to give the font styles to the html elements user need to use the font-family property as shown in the below code.
[html]
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">SPlessons</h1>
<p style="font-family:calibri;">1st paragraph.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Text Color
In order to give the coloring to the text user need to use the color property as shown in the below code.
[html]
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">SPlessons</h1>
<p style="color:red;">1st paragraph.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Text Size
font-size is utilized to give the text size for an html element the code is as shown below.
[html]
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">SPlessons</h1>
<p style="font-size:150%;">1st paragraph.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Text Alignment
In order to align the text in horizontal alignment user need to use the text-align property as shown in below code.
[html]
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Splessons</h1>
<p>1st paragraph.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Points
- Text size should be given in percentages.
- font-family is used for different text fonts.