Aligning and Changing Text Fonts in HTML

Text on a web page would be boring if you could not make it blink or be of a crazy color. If you could not format text there would be no way to show the reader that you were angry or that there was a word or sentence that needed special attention. We don't think about the formatting of our text or how often we use formatting to add emotion or importance to our typed words. Have you ever been accused of yelling at someone because you accidently left the caps button on when sending an email?

We are used to having buttons or other widgets that format text for us. However, in an HTML document all the red crazy font you try to add to the page will do nothing. This is where the sweet spot comes in. In an H1 tag, as with all text tags there is a spot between the element name and greater than sign that allows you to format your plain text into all sorts of text variations. Below is a graphic representation of this spot as denoted by the word sweet.

hello

Of course if you copied and pasted that code with sweet in the code nothing would happen. However, this sweet spot can change everything about a line of text. The most commonly used formatting used is to denote text alignment. There are four options that can be used; right align, left align, centered or justified. You may be familiar with these alignment terms from using a Microsoft word type word processor. In order to align text we must use the align code. The align code is expressed like this...

hello

To properly align the text you would replace the xxx with the words "left, right, center or justify." this code works with all heading tags and paragraph text.

The next most popular formatting tool used in web design is font type. There are several ways you can change the font in a line of text. For this article I will only go over the basic style tag within the text tag itself. That may not have made any sense, but I promise you It will soon enough. First I will go over the style element of a text tag. To add any styling to a text tag you would add it into the tag's sweet spot as shown below...

Hello

All text styling will go where the xxx is. In this case we would add the style element for font. You must make sure that the entire element is within the quotation marks or your site will have errors. Suppose you wanted the "Hello" text to be times new roman font. The tag would be written as shown below...

Hello

You can find a list of safe font names to use within the font element by clicking here.