Using an external style sheet, we can easily control the way that fonts / text appears on a web page, here is a brief tutorial on how to make changes to: Header tags, paragraph tags, spans, and divs.

The main attributes that need to be taken into consideration when changing font / text styles are outlined below.

font-family – changes the family of the font, most commonly changed to arial, this because all computers have the arial font on them. Your browser can only display fonts that are stored on your computer, so if you try to show an exotic font on your site, you may end up with people not seeing very much at all!

font-size – fairly self explanatory, size can be denoted in either: px, pt, or em. Generally speaking, em’s are regarded as being the most flexible and accessible for browsers.

font-weight – this attribute controls the thickness, or weight, of the font. This is most useful when controlling h tags, especially the h1 tag.

color – changes the colour of the font, uses a hexadecimal figure preceded by #. E.g. For example, in order to display a white font, you would use: color: #ffffff;

margin – sets margins, margins are set in the order of: top, right, bottom, left. Can be controlled with either px or percentages.
e.g.
margin:5px 10px 0px 5px;
gives 5px top, 10px right, 0px bottom, 5px left.

Padding – has a similar effect and is set the same way as margin.

Other attributes you may want to consider using, these are more for the positioning of fonts.

Text-align – sets the alignment of the text, either center, left, or right.

Line-height – this is an invaluable attribute as it allows you to vertically align text, if you set it to the same height as the parent div.

How to apply these styles.

Styles can be applied many ways. You can apply styles to specific tags like h tags e.g.

h1 {
font-size:20px;
color:#ff0000;
}

Or you can be more specific and create a class, then assign that to a tag. A class is denoted in CSS as having a dot before the name you give it. E.g.

.blue10px {
font-size:10px;
color:#0000ff;
}

Then in the html you need to assign the class to the tag. E.g.

<p class="blue10px">text here</p>