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 associated with them. For instance, in the last
section you saw the "color", "size", and "face"
attributes of the <FONT> tag. These attributes further define the elements.
Attributes are not required. Each tag has a different set of attributes however,
ALL tags have these attributes...
- ID - identifies the element by name
- CLASS - style class
- STYLE - style specification (I'll
talk about this later on in this
topic.)
Attributes are specified
in the tag in this format attribute="value"
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">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.
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 specify 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 specify 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. There are only 255 colors available for use on the web so your
index should fall within those colors. If
you want to know more go to the HTML links section. The following is an
example of how to specify 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 nearly 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> were deprecated, and from now on
in this tutorial, we will use <STYLE> in place of those tags. The syntax of the
style attribute is as follows:
style="property1:value; property2:value;"
So now, instead of using <p><font color=
"#ffcc66">Some text</font> to
colorize 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" maintains 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 specifed. So
in the case of this example, the word 'red' gets the
red property specified by SPAN but maintains the bold
property of P since font-weight was last specified in the P
tag. This is the essence of cascading styles which is
covered in the Dynamic HTML tutorial.
We can even replace many of the tag attributes with style
properties. Take for instance the bgcolor property of the
<BODY> tag. 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
specify 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!
There are many style properties available, far too many to
mention and explain in this tutorial. For a complete list, consult
the W3C. There is also a more advanced
discussion of style that includes Cascading Style Sheets (CSS) which
I will discuss in the Dynamic HTML 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 >> |
