Coloring Body Content
- Okay, so now that you've learned all about backgrounds, it is time to forget everything you just learned. Backgrounds are cool, certainly were big in the second generation of web sites during 1995 and 1996, and can often solve some of your design problems.
- However, backgrounds, as you saw in the previous section have serious limitations.
- These days, much of the decorating of body content is handled not with backgrounds, but with the BGCOLOR, TEXT, ALINK, VLINK, and LINK attributes.
Body Tag Attributes
- The <BODY> tag allows you to define global color attributes for the page. The following table outlines these attributes.
Attribute Description
BACKGROUND
Specifies a background image to use for the background of body content.
BGCOLOR
Specifies the color to be used as the background for body content
TEXT
Specifies the color of regular text within the body content
LINK
Specifies the color of a link
ALINK
Specifies the color a link turns when you are clicking on it
VLINK
Specifies the color of a visited link
- Let's take a look at an example. Consider the following code, paying close attention to the <BODY> tag:
<HTML> <HEAD> <TITLE>Coloring Body Content</TITLE> </HEAD> <BODY BGCOLOR = "black" TEXT = "white" LINK = "yellow" VLINK = "green"> <BLOCKQUOTE> This is an example of a colored page. Notice that the background is black and that regular body text is white. Also notice that <A HREF = "http://www.extropia.com">Visited Links</A> turn green while <A HREF = "http://www.fakedomain.com">Regular Links</A> are yellow. </BLOCKQUOTE> </BODY> </HTML> |
- The figure below shows the output of the previous code in a web browser
Defining Colors by Name
- You can see that coloring your background is pretty easy. But what colors are available to use for coloring?
- As you saw in the example above, basic colors are predefined by your web browser. Thus, you can access colors like "white", "black", and "yellow" by simply using the names of the colors themselves. Specifically, all the same colors that are available to the <FONT> tag are available in the <BODY> tag.
- Below is a table put together by Lynda Weinman that outlines the color names that you can use to color your text and background when displayed in Netscape Navigator.
|
aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue |
chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgrey darkgreen darkkhaki darkmagenta |
|
|
indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrod yellow lightgreen lightgrey lightpink |
lightsalmon lightseagreen lightskyblue lightslategray lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumorchid mediumpurple |
|
|
darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray dodgerblue |
firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow honeydew hotpink indianred |
|
|
mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab |
orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple |
|
|
red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue snow springgreen |
steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen |
|
Defining Custom Colors
- However, you are certainly not limited to the colors defined by a browser. Rather than specifying a color name, it is perhaps better to define a color by its RGB value and use that.
- RGB values give you greater control over the color and also protect you from differences in color support between browsers.
- The RGB color scale works as follows...
- The color of a pixel on your monitor is made up of a mixture of three colors: red, green and blue. When these colors are mixed together, you can get any other color because of how the physics of color works.
- Typically, you will specify how much of each primary color you want mixed into a final color. This process is sort've like a painter blending colors on his easel.
- Each color amount is specified by a hexadecimal value from "zero" to "F". Zero means that there is none of that color represented in the mixture and "F" means that there is quite a bit of that color mixed in.
Hexadecimal numbering is another weird computer thing. But actually it is very easy if you take a minute to understand it. Basically, the hexadecimal system starts at zero and counts to F as follows 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. The process is a lot like counting a deck of cards that goes ACE, 2, 3, 4, 5, 6, 7, 8, 9, 10, Jack, Queen, King. Just think of A as being like 10, B being like 11 and so on.
- An entire color is defined by a six digit hexadecimal code such that the amount of red is first, the amount of green is second, and the amount of blue is last.
- The following table shows how to make some common colors:
| Code | Color |
| FF0000 | Bright Red |
| 660000 | Dark Red |
| 00FF00 | Bright Green |
| 0000FF | Bright Blue |
| FF00FF | Magenta (Red and blue mix) |
| FF00FF | Purple (Red and blue mix with extra blue |
| BBBBBB | Light Gray |
| 000000 | Black |
| FFFFFF | White |
Browser Safe Colors
- Well it seems from the previous sections that there are thousands of possible colors for you to choose from.
- However, in reality, you are greatly limited by the colors that are supported by the browser software, the user's monitor, and all sorts of other little technical issues.
- Thus, it is best to limit your selection to a group of colors called "browser safe colors" that you can be sure will be represented on everyone's machine in a similar way.
- These colors are made up of combinations of the hexadecimal values: 00, 33, 66, 99, CC, and FF that are determined mathematically according to cross-platform considerations and that represent 216 possible color hues.
- This goes for custom graphics as well. Whenever you work with color on the web, take time to make sure that you are working in the browser safe color palette.
Exercise Eight
- Okay, now try out some of the body attributes on your personal web page.
More HTML and CSS: 
