FONTS AND COLORS!

QUICK JUMP
Click on a subject to be taken to it on this page:

Nothing spices up a web page more than the tasteful use of color, fonts, and font sizes. However, be forewarned--Many older browsers do not support the newer font styles and colors!
What this means in plain English, is that although your Web Page may look awesome to you, it may not necessarily look so to others. The trick is to choose the most popular font styles in use today. Below you will see some examples, and how to use them.

FONT STYLES

There are many fonts available today that are recognized by the two dominating browsers--INTERNET EXPLORER and NETSCAPE NAVIGATOR. As mentioned before, many browsers, especially older ones, do not recognize some font styles, so we must choose carefully the fonts to use on web pages.

POSTING FONTS

To post different fonts, we must utilise the "font face=" attribute. Here are some examples below:-

TIP:-- it is only necessary to enclose the font names in quotation marks (") if the font name has more than one word--e.g.-- Comic Sans MS

<font face=arial color=red size=+2>This font is ARIAL</font> That gives you this:- This font is ARIAL

<font face=impact color=red size=+2>This font is IMPACT</font> That gives you this:- This font is IMPACT

<font face=balloon color=red size=+2>This font is BALLOON</font> That gives you this:- This font is BALLOON

<font face=copperplate color=red size=+2>This font is COPPERPLATE</font> That gives you this:- This font is COPPERPLATE

<font face=papyrus color=red size=+2>This font is PAPYRUS</font> That gives you this:- This font is PAPYRUS

<font face=marriage color=red size=+3>This font is MARRIAGE</font> That gives you this:- This font is MARRIAGE

<font face="Curlz MT" color=red size=+2>This font is CURLZ MT</font> That gives you this:- This font is CURLZ MT

<font face=verdana color=red size=+2>This font is VERDANA</font> That gives you this:- This font is VERDANA

<font face="Comic Sans MS" color=red size=+2>This font is COMIC SANS MS</font> That gives you this:- This font is COMIC SANS MS

<font face=gigi color=red size=+2>This font is GIGI</font> That gives you this:- This font is GIGI

<font face=westminster color=red size=+2>This font is WESTMINSTER</font> That gives you this:- This font is WESTMINSTER

<font face="lucida handwriting" color=red size=+2>This font is LUCIDA HANDWRITING</font> That gives you this:- This font is LUCIDA HANDWRITING

Note:--If you do not see one or more of the above font styles, your browser probably does not support them.

OTHER TAGS

We may as well look at a few other "tags" that will help emphasize your text. Remember, with a very few exceptions, you must always enclose the text you wish to change with our brackets-- < >.

Heres a few examples, and what they do:--

<b>Relayskool</b>--that gives you bold--like this: Relayskool

<i>Relayskool</i>--that gives you italics--like this: Relayskool

<u>Relayskool</u>--that gives you underline--like this: Relayskool

<s>Relayskool</s>--that gives you a "strikethrough effect"--like this: Relayskool

Here are 2 more simple tags, which do not require "closing"-- the first is the "paragraph break"-- <p>--inserted into text, like this:--

She said she could stay,<p> but only for an hour.

It will look like this:-

She said she could stay,

but only for an hour

The second tag is the "line break"--<br>--inserted into text, this performs a function similar to the "return" key, on a typewriter. Once again, our sentence:--

She said she could stay,<br> but only for an hour.

Becomes this:--

She said she could stay,
but only for an hour.

FONT SIZE

Here is what you need to enter to change the size of the font:--


<font size=-2> Hello!</font> gives you this:--Hello!
<font size=-1> Hello!</font> gives you this:--Hello!
<font size=+1> Hello!</font> gives you this:--Hello!
<font size=+2> Hello!</font> gives you this:--Hello!
<font size=+3> Hello!</font> gives you this:--Hello!
<font size=+4> Hello!</font> gives you this:--Hello!

Get the idea?

POSTING IN COLOR

There are quite literally millions of colors at your disposal on the web. These are coded alphanumerically, which can be daunting and frustrating, and requires at the very least a chart or guide, until you become familiar enough to remember some of these codes. For example, one shade of red is --#FF0000.
Wouldn't life be so much simpler if you could just type in the name of the color instead? Well, you can!! Of course, your palette will be far more limited, but the name of the game here is to make life simpler for you, until you are used to all this stuff! To go to the color chart at the bottom of this page, click HERE

Lets post a few examples in basic colors:--

<font color=red>Relayskool!</font> will give you--Relayskool!
<font color=blue>Relayskool!</font> will give you--Relayskool!
<font color=brown>Relayskool!</font> will give you--Relayskool!
<font color=green>Relayskool!</font> will give you--Relayskool!
<font color=purple>Relayskool!</font> will give you--Relayskool!

Now lets combine a few of the fonts and tags above!!

<font face=papyrus color=red size=+2><u>Relayskool!</font></u> will give you--Relayskool!
<font face=impact color=blue size=+3>Relayskool!</font> will give you--Relayskool!
<font face=arial color=green size=+1><i>Relayskool!</font></i> will give you--Relayskool!


LISTS

"Lists" are a quick and easy way to have anything requiring numbered or un-numbered, well, lists. Here are 2 imaginary grocery lists to give you an example:--

  1. Milk
  2. Eggs
  3. Cheese
  4. Bacon
  5. Apples
  6. Orange Juice
  7. Frozen Pizza

  • Milk
  • Eggs
  • Cheese
  • Bacon
  • Apples
  • Orange Juice
  • Frozen Pizza

Looking at my list, I guess I don't eat too healthily hehe-- what you are looking at are "Ordered" and "Unordered" lists. Heres what I typed in for the first grocery list:--
<ol><li>Milk<li>Eggs<li>Cheese<li>Bacon<li>Apples<li>Orange Juice<li>Frozen Pizza</ol>

That is the "Ordered List", or numerical list. Always begin your code with <ol> and end it with </ol> There is no need to enter any line or paragraph breaks, it will happen automatically with each <li> attribute. The <li> does not require closing. Heres what I type for the second grocery list:-
<ul><li>Milk<li>Eggs<li>Cheese<li>Bacon<li>Apples<li>Orange Juice<li>Frozen Pizza</ul>

That is the "Unordered List", or "bullet" list. Always begin your code with <ul> and end it with </ul> There is no need to enter any line or paragraph breaks, it will happen automatically with each <li> attribute. The <li> does not require closing.

Now go and show off your new knowledge and have FUN!!!!


BACK TO CONTENTS PAGE--

BACK TO HOMEPAGE--


COLOR CHART
Pick a color. Click "Test" and the background will display the color.
Color Name   Hex Values RGB Values
# R G B
aliceblue  240248255
antiquewhite  250235215
aqua  0255255
aquamarine  127255212
azure  240255255
beige  245245220
bisque  255228196
black  000
blanchedalmond  255235205
blue  00255
blueviolet  13843226
brown  1654242
burlywood  222184135
cadetblue  95158160
chartreuse  1272550
chocolate  21010530
coral  25512780
cornflowerblue  100149237
cornsilk  255248220
crimson  2202060
cyan  0255255
darkblue  00139
darkcyan  0139139
darkgoldenrod  18413411
darkgray  169169169
darkgreen  01000
darkkhaki  189183107
darkmagenta  1390139
darkolivegreen  8510747
darkorange  2551400
darkorchid  15350204
darkred  13900
darksalmon  233150122
darkseagreen  143188143
darkslateblue  7261139
darkslategray  477979
darkturquoise  0206209
darkviolet  1480211
deeppink  25520147
deepskyblue  0191255
dimgray  105105105
dodgerblue  30144255
firebrick  1783434
floralwhite  255250240
forestgreen  3413934
fuchsia  2550255
gainsboro  220220220
ghostwhite  248248255
gold  2552150
goldenrod  21816532
gray  128128128
green  01280
greenyellow  17325547
honeydew  240255240
hotpink  255105180
indianred  2059292
indigo  750130
ivory  255255240
khaki  240230140
lavender  230230250
lavenderblush  255240245
lawngreen  1242520
lemonchiffon  255250205
lightblue  173216230
lightcoral  240128128
lightcyan  224255255
lightgoldenrodyellow  250250210
lightgreen  144238144
lightgrey  211211211
lightpink  255182193
lightsalmon  255160122
lightseagreen  32178170
lightskyblue  135206250
lightslategray  119136153
lightsteelblue  176196222
lightyellow  255255224
lime  02550
limegreen  5020550
linen  250240230
magenta  2550255
maroon  12800
mediumaquamarine  102205170
mediumblue  00205
mediumorchid  18685211
mediumpurple  147112219
mediumseagreen  60179113
mediumslateblue  123104238
mediumspringgreen  0250154
mediumturquoise  72209204
mediumvioletred  19921133
midnightblue  2525112
mintcream  245255250
mistyrose  255228225
moccasin  255228181
navajowhite  255222173
navy  00128
oldlace  253245230
olive  1281280
olivedrab  10714235
orange  2551650
orangered  255690
orchid  218112214
palegoldenrod  238232170
palegreen  152251152
paleturquoise  175238238
palevioletred  219112147
papayawhip  255239213
peachpuff  255218185
peru  20513363
pink  255192203
plum  221160221
powderblue  176224230
purple  1280128
red  25500
rosybrown  188143143
royalblue  65105225
saddlebrown  1396919
salmon  250128114
sandybrown  24416496
seagreen  4613987
seashell  255245238
sienna  1608245
silver  192192192
skyblue  135206235
slateblue  10690205
slategray  112128144
snow  255250250
springgreen  0255127
steelblue  70130180
tan  210180140
teal  0128128
thistle  216191216
tomato  2559971
turquoise  64224208
violet  238130238
wheat  245222179
white  255255255
whitesmoke  245245245
yellow  2552550
yellowgreen  15420550
RETURN TO TOP OF PAGE