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

Note: 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).


How to set the Font color - 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 [ Here]

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 [ Here ].

Font size can be One to Seven. (Note: If you set your font with CSS you can use pt or px sizes, which allows you to be a lot more precise).

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

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

Marquees have other behaviors
Note: 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 scroll amount

Scrolldelay lets you make your marquees pause

Finally, you can get creative with your marquees, to get cool effects like this.
Note: 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"

Quote
<ol type="a">
<li> Item 1
<li> Item 2
<li> Item 3
</ol>


How to make my text linkable - HTML

Here is the code to make your text click able.
Note: Links on Vampire freaks must always be FULL (i.e include the http:// bit)

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

Added (2009-12-20, 8:50 Am)
---------------------------------------------


How to edit text using CSS

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:

Normally you would probably use the span tag for applying styles to individual bits of text, since that's 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 colored comments, either on peoples profiles, or on the message boards, you'll find the HTML is filtered more carefully, and the span tag is not allowed. This isn't 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. Here is how it would work.

One small problem with this- if you're 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 hoverlinks 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:

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 res.

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.

Added (2009-12-20, 8:50 Am)
---------------------------------------------


Font Variant (with CSS)

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 here is the code.

Note: 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)

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


This text is sideways in IE!