Header tags H1 to H6 style by using CSS in a webpage

As we have seen various html tags can be managed by using style properties , same way we can manage header tags <H1> or any other tag in the same way.

You can read more on type of header tag and its uses here

Header tag style can be managed locally or from a common style sheet file for the whole website. We will discuss some of the styles we can use along with header tags but you can add any other types of properties.

By using style properties we can manage how our header tags will be displayed. We can control font size, font weight, colour, margin, background and many other properties from the style properties.

Here is the code used in external style sheet to manage headers for this site.


h1,h3 {font-family: Verdana, Arial, Helvetica, sans-serif;

    margin-top: 0.0em;

    margin-bottom: 0.5em;

    color: #0000c0;

    FONT-SIZE: 13pt;

font-weight: bold; color: #4c4c4c

}

h4{

background: #e8f2d7;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-align: center;

}

As you can see we have defined H1 and H3 as same style property but H4 is different with a background color
We will keep the above code inside <HEAD> tag within <STYLE>

<h1>This is H1</h1> 
<h4>This is H4</h4>

Output is here

This is H1

This is H4

This article is written by plus2net.com team.

plus2net.com

Click for more tutorial on HTML Div Tag

Header tags H1 to H6 style by using CSS in a webpage

This is H1

This is H4

Subscribe