ColorIn the last section you learned how to use the <FONT> tag to add color
to your text. But what if you don't want the plain old white background color
on your page but something more inviting like teal? The "BGCOLOR" attribute of
the body tag will achieve that. But let's talk first about tag attributes.
- Attributes
- Every html tag has attributes that go with them. For instance, in the last
section you saw the "COLOR", "SIZE", and "FACE"
attributes of the <FONT> tag. These attributes give more detail to the tags.
Attributes are not required. Each tag has a different set of attributes however,
ALL tags have these attributes...
- ID - identifies the element by name
- STYLE - style specification (I'll talk about this later on in this topic.)
- CLASS - style class (I discuss this in the CSS tutorial)
Attributes are added to html tags like this...attribute="value".
If more than one attribute is added, you must use a space to separate them like this...attribute1="value" attribute2="value" and so on....
The value may be single quoted, double quoted, or not quoted at all. If the value
contains spaces it must be quoted, so it's a good idea to get into the habit
of quoting all attributes.
Here's an example...
<p id="myparagraph" align="center">Stuff in the paragraph</p>
Now let's get back to changing the background color. The BGCOLOR attribute of
the <BODY> tag allows you to change the background color of the entire page.
Most community sites (such as Blackplanet) only allow you to change the body content so don't try this on your community site page. Use the <STYLE> tag instead.
Try this... create an html document with the following code...
<html>
<body bgcolor="teal"><font color="yellow">
Yellow text on teal background</font></body>
</html>
It should look something like this
Yellow text on teal background
Experiment with different text and background colors.
- The
color pallette
- As you've probably noticed, you can use quite a number of colors
by name. But suppose you want a different shade of blue not covered by
"blue", "lightblue", or "darkblue"?
The answer is use the RGB color pallette. You may use an RGB (Red-Green-Blue)
index in place of a color name. For instance, to get the shade of blue
used in many places throughout this tutorial use 336699. An in-depth discussion
on what this means is out of the scope of this tutorial. However, the quick
and simple meaning is, each of the 3 colors range from 00 hex (no color) to
ff hex (full color). So in my example the amount of red is 33, green is 66, and
blue is 99. If you want to know more or see the full rgb color index, go to the
HTML links section. The following is an
example of how to use an rgb index in an html tag
<font color="#336699">This should be blue</font>;
Now you're ready to really experiment with colors.
Style
STYLE is an attribute of almost every html tag. It is used to
provide just about any kind of style you can think of, to the text
or tag element (could be something other than text, like an image). This
is why some of the specific style tags like <font> are not recommended, and from now on
in this tutorial, we will use the STYLE attribute in place of those tags.
The format of the STYLE attribute is:
style="property1:value; property2:value;"
So now, instead of using <p><font color=
"#ffcc66">Some text</font> to give color to
text
we use this...<p
style="color:#ffcc66">Some text</p> (we may not want this
style beyond this paragraph so we use the end paragraph
tag).
But suppose we want only one word in the paragraph to be a different
color? In that case, we need a general tag which does
no formatting of it's own, to apply the style attribute. Of course,
there is such a tag. Read on...
- <SPAN> and <DIV>
- These tags
are used as containers for blocks of html code. There's not
much difference between them, except the <DIV> tag causes a line break and it
can do alignment formatting with the ALIGN attribute. However, the <SPAN> tag
is an inline tag and does no formatting
on it's own.
With that, let's use <SPAN> to make one word in a paragraph, a different color:
<p style="color:#336699;font-weight:bold">
We only want the word
<span style="color:red">red</span>
to be a different color</p> It looks like this:
We only want the word red to be a different color
Notice how the word "red" keeps the bold
style property of the paragraph tag. Which brings me to a point about style hierarchies...When styles are nested, elements
take on the style property most recently used. So
in the case of this example, the word 'red' gets the
red property of SPAN but keeps the bold
property of P since font-weight was last set in the P
tag. This is the essence of cascading styles which is
covered in more detail in the Cascading Style Sheet tutorial.
We can even replace many of the tag attributes with style
properties. Take for instance the BGCOLOR property of the
<BODY> tag.
Most community sites (such as Blackplanet) only allow you to change the body content so don't try this on your community site page. Use the <STYLE> tag instead. We can get that same yellow on teal affect with
the following...
<body style="background-color:teal; color:yellow;>Yellow
text on teal background</body>
Try this out and you'll get
the same results as with the BGCOLOR attribute. Furthermore, you can
change the background on just about any element with the background
style properties. Check this out...
Look ma, I can change the
<span style="background-color:orange"> background
color</span> of my text!
Look ma, I can change the background color of my
text!
For a more detailed discussion of style, go to our Cascading Style Sheets (CSS) tutorial.
Time for another exercise. Try the exercise
in the previous section without using the
<FONT> and <U> tags. And for a
twist, make the background color of the document a light gray (#CCCCCC).
Here
is a list of some STYLE properties that you may wish to
use:
- font-weight (values: normal, bold, bolder, 100...900)
- text-decoration (values: none, underline, line-through, ...)
- color (values: named color or #rgb index)
- font-size (values: a number in pixels, large, medium, small, ...)
- font-family (values: Arial, Courier, Verdana, ...)
- background-color (values: named color or #rgb index)
Next >> |
