More Web Design Tutorials

Syling H Tags with CSS

March 12, 2011

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:

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

(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

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;
}

And all of the above creates this.