Syling H Tags with CSS

Different browsers have different default styling for headings – the h1, h2, h3, etc. tags. However, with a little bit of CSS, we can style them any way we like.

  • Просмотров |

Different browsers have different default styling for headings – the h1, h2, h3, etc. tags. However, with a little bit of CSS, we can style them any way we like.

If we want to apply certain styles to all our headings – for example margins to create a larger space above the header than between it and the following paragraph, write the CSS like this:

h1, h2, h3, h4, h5 {
    margin-top: 35px;
    margin-bottom: 0;
}

Also note that the bottom margin which is set as zero, does NOT have a unit of measure. Zero does not need any unit of measure; zero is zero, whether it’s px, em, percent, whatever.

Maybe we want our headings in a different font than the rest of our page, and with this CSS

h1, h2, h3, h4, h5 {
    margin-top: 35px;
    margin-bottom: 0;
    font-family: Arial, Helvetica, sans-serif;
}

we can achieve that with minimal styling: (See Arial Font Applied to Headings.)

Or we can address individual tags:

h1 {
    color: #FF0000; 
}
h2 {
    background: #FFFF99; 
}
h3 {
    text-align: center;
}
h4 {
    font-style: italic;
}
h5 {
    color: #CCFFFF; 
    background: #000099;
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Authorization
*
*
Registration
*
*
*
Password generation