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 make the browser 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 aqua, gray, lime and maroon. 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).

HTML supports 2 different types of lists.

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

* square

* disc

* circle

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

Heres the code to make your text clickable:
Nb, Links on Vampirefreaks must always be FULL (ie include the http:// bit)

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

As well as coloring individual bits of text, CSS also allows you to style large blocks of text, or bits you don't have direct control over, so cant wrap font tags around, like peoples comments on your profile.

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 profile 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:

So what about getting more specific, and just editing text in a certain table? Well, every table on the VF page has something called a class. This is a sort of id by which CSS can refer to it. You can find a full list of the classes for all the tables on the Profile Page section of this site, but for now let's use the comments table as an example. The comments table has the class "comments" (big surprise there). In CSS classes are always preceded by a dot, so that the browser realises its a class, so when we want to apply styles to the comments table, we use ".comments" like this:

As with the page body, you can apply as many styles as you like, one after the other, but these ones will only affect the text in your comments table.

Individual Bits of Text

Normally youd probably use the span tag for applying styles to individual bits of text, since thats pretty much what its designed for. On your profile page the span tag is allowed and this works fine. You could style an individual bit of text like this:

However, if you want to make coloured comments, either on peoples profiles, or on the messageboards, you'll find the HTML is filtered more carefully, and the span tag is not allowed. This isnt really a problem, because you can apply styles to any tag you like. P (paragraph tag) might be a good one, since this is allowed both on the boards and in comments. Heres how it would work:

One small problem with this- if youre a perfectionist, you'll notice that the p tag includes an automatic line break- so you get a bit of a gap between the text above and your colored paragraph. To fix this, you can just set the paragraph margin to zero-

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 in this tutorial.

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

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.

As you can see, you can set as many properties as you like for each of the different link states.

Changing Links in Specific Tables

If you want to change the links in a specific table on your UcoZ page or any other page, for instance, make only the links in your leftnav table red, you would just use the appropriate class in front of each link state you want to change, for example, this code would make all of your leftnavs maroon when unvisited, deeppink when visited, and teal on hover, like the ones above:

CSS Text Properties - Color with CSS

Font Family (with CSS)

Font Size (with CSS)

Setting font size with CSS is a little different to HTML, because you have the benefit of a whole range of different measurements. Px (pixels) and pt (point) are the ones your probably going to want to use. They're a nice simple, fairly static measurements. The key difference between them is that px sizes change depending on the users screen resolution. Pt maintains its size regardless of screen rez.

For links, CSS has the option to set a background color just for the text.(nb you can't do this with plain text, as the equivalent style is used to set page background). You can set background color using color names or hex codes.

Font weight is for making text bolder or lighter. Values include bold, bolder, light, and 100 (thin text), 200 (thicker), etc. upto 900. In small fonts the difference is negligible.

Font Style (with CSS)

Text Decoration (with CSS)

Font Variant (with CSS)

Added (2008-06-19, 0:31 Am)
---------------------------------------------
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. Lets write over an image so you can see whats happening:

And heres the code:

Nb, Opacity works on images too.

Glow / Shadow / Flip / Fade (IE Only)

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.

Glow Text (IE Only)

Shadow Text (IE Only)

Vertically Flipped Text (IE Only)

Fading Text (IE Only)

Sideways Writing (IE Only)

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

This text is sideways in IE!

Added (2008-06-19, 0:31 Am)
---------------------------------------------
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. Lets write over an image so you can see whats happening:

And heres the code:

Nb, Opacity works on images too.

Glow / Shadow / Flip / Fade (IE Only)

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.

Glow Text (IE Only)

Shadow Text (IE Only)

Vertically Flipped Text (IE Only)

Fading Text (IE Only)

Sideways Writing (IE Only)

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

This text is sideways in IE!

Added (2008-06-19, 0:32 Am)
---------------------------------------------
My excuse if I'm off-topic.
Hope to help.

Enjoy..