Basics of HTML

Text Decoration: Colors, Fonts, etc.

Caveats

Be very careful and sparing in specifying different fonts and sizes of font in your pages, as well as in your uses of colors.

Some readers have a special default font set on their browsers. For instance, they might specify a large size if they cannot read small print on the screen. If you make your font even larger, this might cause them problems. Likewise, different colors, and combinations of colors, can make your content unreadable to some users (and possibly annoying for others).

The safest way to design web pages is with simplicity in mind. Your content is more important than your style, so don't intertwine the two more than is necessary to present a visually pleasing page. And think long and hard before specifying any radical changes from defaults.

line

You might not be aware of a problem with italics on screens: slanting the text makes the images of the letters go "against the grain," since the monitor's pixel grid is aligned at right angles. On some monitors with poor resolution, italics can be hard to read. I am trying to get away from using italics except very sparingly in my pages. Large sections of italicized text should certainly be avoided.

Web Color Basics

Adding color to your text, to be inline with current standards, is a little more complicated than bolding and italics. It requires you apply appropriate styles to your text. Modern HTML editors will often do this for you, so the following box will only briefly explain how to do this, and in the simplest way. You can find out more about Styles by following the tabs above.

But first, a note about colors. In the old days, when monitors could only display 256 colors, you had to be careful to use only "web-safe" color codes. However, today's monitors, for the most part, don't have this limitation and any color you can imagine or concoct can probably be displayed correctly. You refer to colors by a hexadecimal code.

You can find charts of colors with their codes easily on the web, but as usual, I like to go to the official source for this information. W3Schools has this color picker. They also have a listing of 140 colors that can be used with just a color name instead of the code (there's even "Dodger Blue"!).

Editors like Dreamweaver let you select colors from a palette and then put the code in for you. But, as always, the more you can know about what's going on under the hood, the better web designer you'll be.

Using Colored Text

To color a piece of text using an inline style, which only applies in that one instance, use  tags to enclose the text to be colored:

This makes hot pink text.

gives you this:

This makes hot pink text.

(For larger chunks, that cover multiple elements, like paragraphs, for example, use <div></div> instead of .)

Of course, whole paragraphs and headings can also be colored in this way, by inserting style statements into the appropriate tags:

A red paragraph

<h2 style="color:#FF0000">A red level-2 heading</h2>

Not to mention, the whole body of the page:

<body style="color:#FF0000">All the text in the body of the page will be red.</body>

NOTE: CSS now offers more sophisticated color effects, like partial transparency. And with text, there are some spectacular "word art" effects like shadowing that the new styles make possible. Check it out at W3Schools.

If you are going to want to have several different elements on your page colored the same way, it's best to insert style statements into the file's <head></head> section, or, better yet, to create a separate style sheet that can be used to affect elements on many different pages. To learn how to do this, see the Styles tabs above.

In the days before styles, web authors used  tags with size, color, and face attributes to change font size, color, and typeface. Since the tag is still supported by the major*** browsers, you may see source coding with these tags.

Fonts

Another simple attribute that can be specified with styles is the typeface. To specify Courier font for a chunk of text, use this code:

An example of the Courier font

displays this, no matter how the default font of the brower is set:

An example of the Courier font

You will notice that the value name is font-family, which means you should specify more than one actual font name. You do this because not all browsers can display all the fonts that you might have available to you for web page creation. To be safe, you should use a generic font-style descriptor such as "mono" along with "Courier," and "sans-serif" along with "Arial." Browsers will display the first one in the list that they can. If it can't display any of them, then it won't alter its default font.

Positioning

You might want your text to display in some way other than the usual left justification, too.

Centering text is frequently called for, and it's easy to do. To center a chunk of text, just type:

Text to be centered

and you get this:

Text to be centered

Of course, you can center whole paragraphs, or headings, or other elements, by putting the style statement in the appropriate tag as an attribute.

To right-justify text, just change the text-align value to right: style="text-align:right"

For more complicated and/or sophisticated positioning of text, see the Styles:Usage tab above.

Graphics credits

The stylish line divider graphic came from Realm Graphics, a nice free graphics site.

Other Text Enhancements

The easiest ways to enhance your text are familiar from the world of print on paper: bolding and italics. They require simple paired and nested tags surrounding the text to be enhanced. For example, typing:

This bolds the textbetween the tags

causes this display:

This bolds the text between the tags.

Similarly:

This gives you italics between the tags (em being short for "emphasis")

This gives you italics between the tags (However, remember my italics caveat above, and use them sparingly.)

For real emphasis, you can combine the tags. Just be sure to nest them properly:

This is really, really important!

shows up as:

This is really, really important!

line

You can also underline text, although you need to be sparing in this text enhancement, since it might confuse readers who expect underlined words to be links. It's also a little more complicated to effect. You have to specify underlining in a "style" statement. (For more about the theory and practice of styles, see the Styles tabs above.)

For instance, typing:

This is a very important point

causes this display:

This is a very important point

This kind of style statement is exactly how you make the underlines in your links go away, if that's the effect you want. Type none after text-decoration: ...

Go to the <a style="text-decoration: none" href="http://www.astros.com">ballgame</a> tonight!

... and you see:

Go to the ballgame tonight!

line

You will also occasionally see these tags used for bolding  and italicizing  text. However,  and  are preferred under current HTML standards. You might even see  for underlining, but that's even more out of favor under current standards.

Size

Size is another attribute of your text that you can modify by using style statements as described above. You can re-size the text several different ways:

absolute sizes: large, small, x-large, x-small, etc.
specified sizes: 14px (pixels), 1in (inches), etc.
relative sizes: smaller, larger
percentages: specifying a percent refers to the size the of element (for instance, a paragraph) that the text is inside of

Because you never know what size fonts your readers are using as defaults, I think the relative specifications are preferable. (Plus you don't need to remember pitch counts and character widths.) The text will be made bigger or smaller than the user's default browser text, but will not adhere to any absolute text sizing system. For some other issues to consider before resizing fonts, see the Caveats at the top of this page..

To display a chunk of text larger than the surrounding words, use this code:

Here is some text that is larger than the rest.

to display this:

Here is some text that is larger than the rest.

Last updated: