Headers are a place where capitalization is frequently used. And to assure that your header is displayed uniformly throughout the site without having to worry about actually writing in all caps, just use CSS:

h1 {
text-transform: uppercase;
}

With this, everything that has the h1 tag applied, will appear in all caps.

Another interesting text-transformation property is "capitalize"

h1 {text-transform: capitalize;
}

With this, all your words will begin with a capital letter!

The easiest way to apply a font style to your website, is right there with your body tag:

body {
font-family: "Times New Roman", Times, serif;
}

And there you have it – now all the text on your page will be Times New Roman, and if that font is not installed on the viewer’s computer, then they’ll see the text in Times, and if they don’t have that either, then the text will display in whatever default serif font they have installed.

Side Note: Serif is the style with little hooks – for example opposed to (which is shown in Arial – see the difference?).

Do note the quotes around “Times New Roman” in the CSS above – that’s because that font name consists of more than one word. The quotes keep it together.

Sometimes, you may not want your entire page in one font, but might want your headers to stick out. Easy enough, just style them separately:

h {font-family: Verdana, Arial, Helvetica, sans-serif;
}

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.

In this tip, you will learn how to specify a font’s size with CSS.

Being a practical nerd, I will not waste time talking about all the various methods for declaring font sizes with CSS … instead I will concentrate on the two widely used ways and then briefly explain the differences. First, the two main methods:

1. By pixel
2. By em

What is the difference between and EM and a pixel?

Pixels are an absolute measure of a font’s size and an EM is a relative measure – that means the actual pixel size of the font (as they appear on screen) set with EM’s, can fluctuate. This makes using EM’s trickier. So the nerd answer is NOT to use EMs!

Let’s look at a quick EM example anyway:

<div style="font-size:1.2em">

So the above would cause the fonts to be about 20% larger than the baseline font size – thus 1.2em. I am not going to go into all the nerd details about EM’s because I think pixels are the way to go.

Let’s look at a quick pixel example:

<div style="font-size:12px">

Thanks,

Stefan Mischook

In this ultra simple nerd-free CSS tip, I will show you how to change the color of your fonts with CSS.

Check out the samples:

h2 { color: green; }
 
h4 { color: #9000A1; } 
 
p { color: rgb(0, 210, 87); }

Comments:

You are able to specify the color in either:

• by Named color
• by Hexadecimal
• by RGB

Thanks,

Stefan Mischook