Customizing the Heading Tag Using CSS

Here is the conventional method How to Format the Heading Tags

HTML


<H1>Chinese and Thai Cooking Classes: Recipes,
  foods, and more!</H1>
  <H2>Chinese Cooking Classes</H2>
    <H3>Chinese Recipes: Mandarin and
      Cantonese</H3>
    <H3>Chinese Food Preparation</H3>
  <H2>Thai Cooking Classes</H2>
    <H3>Thai Recipes</H3>
    <H3>Thai Food Preparation</H3>


Notice that the H1 tag describes what the page is about. The other heading tags are the sub-headings to help guide the reader through the page.

Customizing the Heading Tag Using CSS

Normally the Heading Tag is very large and may not fit well within the structure of your page. It often contains too much space around it and therefore will move other elements further down the page. This will create an unprofessional appearance to your site.

By applying CSS to the heading tag you gain layout control. You can achieve this by adjusting the header tag’s margin and padding values.

You can adjust the space around any block-level element by changing the properties that control spacing:

* Padding: the area between text and the border.
* Border: the area between the padding and the margin.
* Margin: the area outside the border that separates one element from another element.

To change the amount of space around the header tag, you need to adjust the margin-top and margin-bottom properties.
The tricky part is that 0 is the default value (the one that causes all the space!). So when you look at a regular header tag, the value of the margin is 0 – even though there’s a lot of space around it.

To decrease the size of an element’s margin, you have to use a negative value like this:


<style>
H1 {
font-size:24px;
           color:blue;
           margin-top:-10px;
           margin-bottom:-15px;
      }
</style>


This header will display in blue, 24-pixel type and be nestled snugly between the other page elements.

Conclusion

The Heading Tag is the most important tag on your web page. Be sure to make it as descriptive as possible and include keywords that encapsulate the theme of your page so it will draw readers to the content of your site.

Resource

Create Custom Headers With CSS