Text Styles

  Pick a Section

Font Face (with HTML)

The problem with fonts on the internet is, if you choose one that your visitors don't have installed on their computer, your text will display in their browsers default font. Since different fonts often take up different amounts of space this can make a real mess of your carefully designed page, so it's generally a good idea to stick to the basic fonts which come pre-installed on most computers. Here's the list:

Its also worth noting that you can specify more than one font, so that if the user doesn't have the first font on the list, the browser will go through it in order until it finds one that they do, for instance:

The above tag would try to render the text first in Arial, then Verdana, then Trebuchet MS, and finally if none of those fonts are available, any sans serif font it can find.

Nb, Sans Serif fonts are the ones like Arial and Verdana, which don't have fancy bits on the end of the letters. Times and Georgia are Serif fonts (with fancy bits).

Font Color (with HTML)

Color (always spelled the American way) can be set using the colors name, or its Hex code.

Browsers recognize an increasing number of color names, such as deeppink, purple, orange and red. You can find a full list of widely recognized color names [ on the w3schools website ]

Hex codes are a fully supported version of color names. Every shade of every color imaginable has a hex code. It's a 6 character code started with a # sign, for instance #ffffff is the hex code for white, and #000000 is black. You can find a pretty long list of hex codes on [ Webmonkey ].

You may have heard of "Websafe" colors...

In the bad old days, when the majority of computers struggled to show more than 256 colors, the websafe hexadecimal color chart was invented. It consisted of 216 colors that these systems could display cleanly. However, with the advent of modern technology, it's probably no longer necessary to take such precautions, since most computers can now display millions of colors.

Font Size (with HTML)

Font size can be one to seven. (Nb if you set your font with CSS you can use pt or px sizes, which allows you to be a lot more precise).

Combining Font Tags

You can combine font face, size and color in the same tag:

Font Style (with HTML)

Scrolling Marquees

You can use marquees to make text or images scroll.
Nb, marquees are not valid HTML 4.1, but they do still work in most browsers.

Marquees have other behaviors...
*NB You may have to refresh the page to see the slide marquee, and Firefox doesn't support it (it scrolls instead).

You can change the speed using scrollamount:

Scrolldelay lets you make your marquees pause:

Finally, you can get creative with your marquees, to get cool effects like this:
*(Nb Browsers other than IE, Firefox and Opera may struggle with marquees within marquees).

Making Lists

HTML supports 2 different types of lists.

Unordered lists are the ones that have some kind of bullet point. The types are:

and the code for writing an unordered list is:

Secondly, there's ordered lists. These are the ones with letters, numbers, or roman numerals before the items. For a numbered list, type="1". For letters, type="a" or "A" (big letters). If you want numerals, then type should be "I". Finally if you want to start your numbered list from the middle, just set the type to the number you want to start from, eg, type="5".

The ordered list code is pretty similar to unordered. Just replace ul with ol:

Making Text Links

Here's the code to make your text clickable:

If you want your link to open in a new window, just add target="_blank" into the link tag, eg:

HTML Vs CSS Methods

Talk to any web design geek, and they'll tell you that HTML font tags are depreciated and you shouldn't use them. They're half right- W3C (the body that sets web design standards) is in fact phasing the font tag out. But all this actually means is that people who design websites and choose to include a W3C doctype declaration for a version of HTML that doesn't support the font tag, won't be able to use font tags on their website if they want it to validate.

CSS Text Editing

As well as coloring individual bits of text, CSS also allows you to style large blocks of text all at once, or if you're styling a profile, bits you don't have access to directly so can't wrap font tags around.

HTML tags know which bit of text you want to edit because you wrap them around it. Similarly with CSS you have to identify the text you want to affect. Let's say you want to affect all of the text on your page. You should apply your styles to body (which means page body, or the entire page). Here's how:

Most of the time you're going to want to edit more than one property of your text at once, and CSS makes this easy- you can just list the properties you want to change one after the other, like this:

As you can see, CSS has a whole bunch of handy properties like text-decoration and letter-spacing that you don't get with plain HTML text formatting. For a full list of CSS text properties, [ Click Here ].


Being More Specific

So what if you just want to edit text in a certain table or div box? Well if it happens to be the only one on your page, or you want the text in all of your tables (or div boxes) to have these styles, you could just apply them to table (or div) like this:

Alternatively you can give the particular object you want to affect a class. A class is a sort of ID by which CSS can refer to it, for example:

Classes in CSS are always preceded by a dot, so that the browser knows it's looking for a class, rather than a tag to style. If you only want the styles to affect this one div or table, you also have the option of putting styles directly in its tag, like this:

Mouseover Links

CSS is great for messing with your text links, because you can edit the styles of unvisited, visited, and hover links separately (and so make them change color when the mouse hovers over them). There is actually a fourth link state, called "active" which is how the link looks when it has just been pressed, but since this only shows for a millisecond before the browser moves off to wherever the link leads, I'm going to skip it.

So let's take a look at the other link states.

and this is the CSS code that makes it the colors it is:

The example link goes to the top of the page. If you've clicked on it, or any of the "top" links on this page, then you've been there before, and it will show up in the visited state color (deeppink) to begin with. If you haven't clicked a "top" link yet, it should be maroon (default unvisited link color). Finally, when you hover over it, it should change to teal (the hover color). Pretty simple, right?

Of course you can do things to your links other than change the colors. How about making it grow massive, and have a bright red background on hover, like this:

and the code:

As you can see, you can set as many properties as you like for each of the different link states. For a full link of CSS text properties, [ Click Here ].


Styling Specific Links

If you only want to apply your styles to a few links on your page, you can stick them in a table or div, with a class, like this:

Then just adjust your link styles so they only affect that div, ie:

CSS Text Properties

Opacity / Transparency

This code works in IE*, Firefox and newer versions of Opera. It may work in other browsers too, but these are the ones I've tested. If you want the text to fade in or out, you can use the [ IE fade ] filter, but that won't work in any browsers other than Internet Explorer. Opacity (in case your wondering) is simply the opposite to transparency. 100% Opaque is completely visible, while 100% transparent is completely invisible. Anyhow, on with the filters. Let's write over an image so you can see whats happening:

And here's the code:

Nb, Opacity works on images too.

*Internet Explorer filters, including Opacity are not valid under HTML 4.1 when applied to text!

Glow / Shadow / Flip / Fade (IE Only)

Filters are not valid HTML 4.1 when applied to text like this, and they are still IE only though, other browsers will just see the plain text.

For filters to work, you must set the width and height of your text. Of course it's unlikely you know that off the top of your head, but approximate values are fine. Your text wont stretch, but too large a width or height will create a space around it in some browsers, and too small a width or height might cut off the edges of your filter. Once you preview your text and see what's happening, you can adjust your width or height accordingly. All these filters work on images too.

<span style="width: 200px; height: 20px; filter: glow(color=deeppink, strength=5);"> Text Here </span>

<span style="width: 250px; height: 20px; filter: shadow(color=teal, direction=200);"> Text </span>

<span style="width: 200px; height: 20px; filter: flipv;"> Text </span>

<span style="width: 200px; height: 20px; filter: fliph;"> Text </span>

<span style="width: 200px; height: 20px; filter: alpha(opacity=0, finishopacity=100, style=1);"> Text </span>

<span style="width: 200px; height: 20px; filter: alpha(opacity=100, finishopacity=0, style=1);"> Text </span>

Sideways Writing (IE Only)

You can make your text appear sideways in the Internet Explorer browser using writing mode: