HTML Style

Here, we have discussed about html style, basic css properties and also about the implementation of css properties with the help of examples...

Welcome back to another interesting article on HTML.

HTML Style

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

html style background-color property example

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 background-color property example

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 color property example

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-family property example

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 font-size property example

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

html style text-align property example

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.