Text Colors Styles and Codes

[ Font Face (with HTML) ] [ Font Color (with HTML) ] [ Font Size (with HTML) ] [ Combining Font Tags ] [ Font Style (with HTML) ] [ Scrolling Marquees ] [ Making Lists ] [ Making Text Links ]

[ HTML Vs CSS Methods ] [ CSS Text Editing ] [ Mouseover Links ] [ CSS Text Properties ] [ Opacity/Transparency ] [ Glow & Other Filters ] [ Sideways Writing ]

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

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 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) [ CSS Text Editing ].

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

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:

Heres the code to make your text clickable:
Nb, When linking to a site outside of Vampirefreaks make sure that the link is FULL (i.e. includes the http:// bit)



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

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 doesnt support the font tag, won't be able to use font tags on their website.

So what does all this mean for including the font tag in your profile? Well... Nothing. Vampirefreaks doesn't currently have a W3C doctype tag, so no matter how correct your code, your profile will never validate, (and unless you are an uber-geek it's unlikely you care much anyway), and no, browsers are not going to stop supporting <font> in the near future, but if you're interested in web design it's certainly good practice to get into the habit of setting fonts with CSS. It is the correct way of doing it.

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:


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


Individual Tables.

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.

[ This is a text link hover over it! ]

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:

[ This is a monster text link hover over it! ]

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


Changing Links in Specific Tables

If you want to change the links in a specific table on your VF 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:

What follows is a list of CSS properties you can apply to almost any text on your page. To learn how to apply them read the [ CSS Text Editing ] bit.



Color (with CSS)

Font Family (with CSS)

Font Size (with CSS)

Background Color (with CSS) (links only)

Font Weight (with CSS)

Font Style (with CSS)

Text Decoration (with CSS)

Font Variant (with CSS)

Letter Spacing (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 heres the code:


Nb, Opacity works on images too. [ Image Opacity ]

Nb, This isn't really what filters are designed for, so it involves a bit of fiddling, but it can look cool. Also filters work only in Internet Explorer- 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. For more info see the [ images page ].


Glow Text (IE Only)
Shadow Text (IE Only)
Vertically Flipped Text (IE Only)
Horizontally Flipped Text (IE Only)
Fading Text (IE Only)

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

This text is sideways in IE!