How to Style Headings in Css

Jun 06, 2012, by admin

Different browsers have different default styling for headings – the h1, h2, h3, etc. tags. (Default Heading Styling). 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:

(See the Styled Margins.) 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

we can achieve that with minimal styling:

Or we can address individual tags: