Welcome back to another interesting article on HTML.
In this article you will learn about html style, basic css properties and also about the implementation of css properties with the help of examples.
HTML Style
The html style attribute is used to add or change a style to an element like color, font, size etc. The style attribute is a universal attribute that can be used with any HTML tag.
By default the style of each element in html are same, the text color is black and the background color is white. In order to add new style on html elements, it is very necessary that you should have basic knowledge about html style properties such as font color, background-color, text-align, font-family, font-size, text allignment etc.
Syntax
<tagname style="property:value;">
In the above syntax, property keyword Indicates css property and value keyword indicates css value.
HTML Style Background Color
The background-color property of css is used to define background color of an html page or an specific HTML element.
Now let's illustrate html style background-color property with the help of following examples.
Illustration no. 1
In this example, we will set a background color for html page.
<!DOCTYPE html><html>
<head>
<title>Html style background-color property Example</title>
</head>
<body style="background-color:CornflowerBlue;">
<h1> This is Heading </h1>
<p>This is a paragraph</p>
</body>
</html>Output
Illustration no. 2
In this example, we will set a background color for two specific HTML elements.
<!DOCTYPE html><html>
<head>
<title>Html style background-color property Example</title>
</head>
<body>
<h1 style="background-color:DarkGray;"> This is Heading with darkgray color background</h1>
<p style="background-color:CornflowerBlue;">This is a paragraph with cornflowerblue color background</p>
</body>
</html>Output
HTML style color
The color property of css is used to define text colour for an html element.
Now let's understand html Style color property with the help of following illustration;
<!DOCTYPE html><html>
<head>
<title>Html style text color property Example</title>
</head>
<body>
<h1 style="color:blue;"> This is Heading with blue color</h1>
<p style="color:red;">This is a paragraph with red color</p>
</body>
</html>Output
HTML style font family
The font-family property of css is used to specify the font of text for an html element.
Now let's illustrate html style font-family property with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html style font-family property Example</title>
</head>
<body>
<h1 style="font-family:times new roman;"> This is Heading with times new roman font-family property</h1>
<p style="font-family:courier;">This is a paragraph with courier font-family property</p>
</body>
</html>Output
HTML style font size
The font-size property of css is used to define the size of text for an html element.
Now let's understand html style font-size property with the help of following illustration;
<!DOCTYPE html><html>
<head>
<title>Html style font-size property Example</title>
</head>
<body>
<h1 style="font-size:400%;"> This is Heading with 400% font size</h1>
<p style="font-size:200%;">This is a paragraph with 200% font size</p>
</body>
</html>Output
HTML style text-align
The text-align property of css is used to define the horizontal alignment of text for an html element.
Now let's illustrate html style text-align property with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html style text-align property Example</title>
</head>
<body>
<h1 style="text-align:center;"> This is Heading with center text allignment</h1>
<p style="text-align:center;">This is a paragraph with center text allignment</p>
</body>
</html>Output
Conclusion
Above we have discussed about html style, basic css properties and also about the implementation of css properties with the help of examples. The html style attribute is used to add or change a style to an element like color, font, size etc. I hope this information is helpful to you all.