D07E
back to Lesson 2.1

Web Site Development

Lesson 2.2 - Color, (fonts and text)
and CSS to replace 'size', 'color' and' face'
in the 'font' tag

FONT -- Size

With HTML 2.0 and HTML 3.2 often the ELEMENT <basefont> was employed to set font size for the entire page. The most usual default setting for font size in browsers is size 3, two approaches can be used if the author wants size 4 to be displayed.
<basefont size="4">
or
<basefont size="+1"> ,  ,  ,  ,  So what would be the CSS replacement
to this?
Your Style Sheet rule could be'
html { font-size: large } which is equivalent to size 4 or you could
go relative with
html { font-size: larger } or smaller, which is equivalent to a +1 / -1, now you see this is setting the rule to the 'html' ELEMENT.
I would prefer to set a rule on the 'body' ELEMENT and I like to use points, the length setting, for example:
body { font-size: 14pt }
div { font-size: 14pt } is ok too, and -⁺-
p { font-size: 14pt } , points are 1/72^th of an inch, So a 72pt font would be kinda' like an inch high.

Well on paper anyway. Let's test that, ---- I will use a 'span' ELEMENT with in-line syle so I do not need to end one paragraph and start a new one. It looks like this:
<span style="font-size: 72pt">How High am I ?</span>
How High am I ?
humm, That's pretty big. Absolute size, that is not relative as with em for letter 'M' size of the browser size gauge setting, can be set with other measurement units besides points, px for pixels, cm, mm, etc. there are others. Absolute size can be set with words don't forget as in
xx-small,
x-small,
small,
medium,
large,
x-large,
xx-large,
there it is.

There is also setting allowing percentage to be used which is relative.

FONT -- Face

FONT -- Color

Special thanks to Bob Stein, www.visibone.com for his wonderful charts and graphs.
Always give other people credit for the work they do if you showcase it.

Well remember we set many color values in the 'body' tag - these would be the defaults
bgcolor="white"
background="texture.jpeg"
text="black"
link="navy"
vlink="maroon" or "purple"
alink="red"

Color Blindness

When using color, remember that 5 to 10% of men have some form of color blindness. This can cause difficulties distinguishing between red and green, or between yellow and blue. In rare cases, there is an inability to perceive any colors at all. You are recommended to avoid foreground/background color combinations that would make the text hard to read for people with color blindness.

Named colors

The standard set of color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are defined in HTML 3.2 and 4.01 and correspond to the basic VGA set on PCs. Most browsers accept a wider set of color names but use of these is not recommended.

Color names and sRGB values, remember not to use caps in your code

	black = "#000000"		green = "#008000"
	silver = "#C0C0C0"		lime = "#00FF00"
	gray = "#808080"		olive = "#808000"
	white = "#FFFFFF"		yellow = "#FFFF00"
	maroon = "#800000"		navy = "#000080"
	red = "#FF0000"		blue = "#0000FF"
	purple = "#800080"		teal = "#008080"
	fuchsia = "#FF00FF"		aqua = "#00FFFF"

Thus, the color value "#800080" is the same as "purple".

Hexadecimal color values

Values like "#FF9999" represent colors as hexadecimal numbers for red, green and blue. The first two characters following the # give the number for red, the next two for green and the last two for blue. These numbers are always in the range 0 to 255 decimal. If you know the values in decimal, you can convert to hexadecimal using a calculator, like the one that comes as part of Microsoft Windows.

Browser safe colors

New computers support thousands or millions of colors, but many older color systems can only show up to 256 colors at a time. To cope with this, these browsers make do with colors from a fixed palette. The effect of this is often visible as a speckling of colors as the browser tries to approximate the true color at any point in the image. This problem will gradually go away as older computers are replaced by newer models.

Most browsers support the same so called "browser safe" palette. This uses 6 evenly spaced gradations in red, green and blue and their combinations. If you select image colors from this palette, you can avoid the speckling effect. This is particularly useful for background areas of images.

If the browser is using the browser safe palette, the page background uses the nearest color in the palette. If you set the page background to a color which isn't in the browser safe palette, you run the risk that the background will have different colors depending on whether the computer is using indexed or true-color.

These are constructed from colors where red, green and blue are restricted to the values:

Here is a table of the browser safe colors and their hex values. My thanks to Bob Stein for this arrangement.

Color swatches for the browser safe palette are available free for many popular graphics packages, from www.visibone.com.

Back to Top

-------------- More on Tables - - Next Lesson

Copyright © 2011 - Alain Lareau
All Rights Reserved unless with Writen Request.
alainelj@yahoo.com this page D07E
https://metaphorman.tripod.com/000/007.html