Hi Brenda,
You can certainly do what you want, but it will require a bit more
understanding of CSS. I sent you some links in another thread. One of them
is an article about CSS called "Adding a Touch of Style." Here'a another
reference you may find helpful:
http://www.htmlhelp.com/reference/css/
But first, let's just get you going on your specific problem. You have a
page with 2 areas that you want to apply different styles to. Now, this is
going to freak you out, because you have no idea how powerful CSS is, and
how it can simplify things, so get ready!
First, let's have a look at your new style sheet:
<style type="text/css">
a
{
text-decoration: none;
font-family:Tahoma;
font-size:10pt
}
..leftMenu td a
{
color: #979E69;
}
..leftMenu td a:hover
{
color: #CCFFCC;
}
..leftMenu td a:visited
{
color: #FF0000;
}
..rightMenu td a
{
color: #2C4B12;
}
..rightMenu td a:hover
{
color: #99FFCC;
}
..rightMenu td a:visited
{
color: #CC3399;
}
</style>
I know, it's a lot different, but it isn't hard to explain. Every CSS style
definition consists of a few basic items:
1. The Selector. The Selector indicates what the style applies to. It is the
part before the opening curly bracket ('{'). Now, you're familiar with using
Selectors that indicate a tag name, like:
a
{
text-decoration: none; font-family:Tahoma; font-size:10pt
}
Note that I've separated it out into lines to make it easier to read. It's
the punctuation that makes a difference, not the line breaks!
Now, this indicates "all 'a' tags." It's a very general Selector. We'll get
to the Rule in a moment. But first, let's look at one of the other Selectors
you've already used:
a:hover
{
text-decoration: none;
font-family:Tahoma;
font-size:10pt
}
Now, this is the same thing as an 'a' selector, but the colon (':')
indicates a "pseudo-class." This is a special kind of "class" (indicating a
"class" or "group", sort of in the same way that "middle class" indicates a
group). It subdivides the 'a' into another group that includes 'a' elements
with the mouse cursor "hovering" over them. The same is true for the
"visited" pseudo-class, which is an 'a' tag pointing to a URL that the user
has been to before.
Now I'm going to introduce you to the concept of a "class Selector." A class
Selector always starts with a dot ('.'). If it starts with a dot, it's a
class. A class, again, is a group of HTML elements. These are elements with
a "class" attribute in them. Here's a simplified version of the first class
in the style sheet:
..leftMenu td
{
color: #979E69;
}
Now, in this case, the class is "leftMenu." So, any HTML element that has a
"class" attribute named "leftMenu" is in this class, and has this style
applied to it. Here's an example from your page:
<table class="leftMenu" border="0" id="table2" bordercolordark="#008000"
bordercolorlight="#008000">
<tr>
<td align="center"><a href="doctor.htm"><br>
About The Doctor</a></td>
</tr>
Now, this is the same as the HTML that was already there for your left menu,
with a "class" attribute added to the table tag. This table is now in the
class "leftMenu."
Anything after a space and before the left curly bracket is a further
refinement of the class. In this case, "td" indicates a table cell, or "td"
element, like the first one in my example above. This means that a td
element inside a table with the "class" attribute set to "leftMenu" is
selected for that rule to be applied.
But wait! There's more! I left out just a wee part of the style definition:
..leftMenu td a
{
color: #979E69;
}
Again, there's a space, indicating that the "a" tag is inside the "td" tag
inside a table with the class "leftMenu." Now we're getting very specific
about the style rule's application. It "selects" all of these elements.
That's why it's called a "Selector."
One more thing, and remember, this is just an introduction. You saw my
modified "a" rule, right? Note that the "leftMenu" rule doesn't contain any
information about the font to be used. That's because it's defined in the
more general rule for all "a" tags. Yes, the same rule gets applied to all
classes for that same tag. It's called "inheritance." They "inherit" the
rule from the "a" tag rule (unless they override it, but let's not worry
about that today!).
Now, for the second part:
2. The Rule. The Rule defines the style that is applied to the
Selector-selected elements. It is everything between the curly brackets.
This is composed of one or more "Properties." A Property is a property of
the element:
a:hover
{
text-decoration: none;
font-family:Tahoma;
font-size:10pt;
}
This rule has 3 properties: "color," "font-family," and "font-size." Each
property has a name, followed by a colon, followed by the value for that
property, and a semi-colon as the end of the property, like the end of a
sentence. The above rule can be translated like this:
The text will not be underlined (decorated).
The Font Family of the text is Tahoma.
The size of the text is 10pt.
So, what we have is a general Selector, "a" - which applies to all
hyperlinks, and defines a few rules about the text. Then we have 2 classes,
"leftMenu" and "rightMenu." Each of these has 3 rules, one for all links in
all table cells in all tables of that class, and 2 for the more specialized
links, "hover" and "visited," which define different colors that are used
when the links are hovered over by the mouse, or have been visited before by
the browser.
Once that is done, the classes are applied to the tables that they are used
in, one for the left menu table:
<table class="leftMenu" border="0" id="table2" bordercolordark="#008000"
bordercolorlight="#008000">
<tr>
<td align="center">
<font size="2" color="#979E69" face="Tahoma">
<a href="doctor.htm"><br>
About The Doctor</a></font></td>
</tr>
....and one for the right table:
<table class="rightMenu" border="0" id="table5" align="right"
bgcolor="#979E69">
<tr>
<td style="border-bottom-style: solid; border-bottom-width: 1px">
<b><font face="Tahoma" size="2">Do you have any
of these <br>
symptoms or conditions?</font></b></td>
</tr>
<tr>
<td style="border-bottom-style: solid; border-bottom-width: 1px">
<a href="conditions-arm.htm">Arm Pain</a>
</td>
</tr>
Notice that there is no more font style around the hyperlinks. It isn't
needed!
Those style rules are automatically applies to all of the links in all of
the cells of each of those tables.
I hope this whets your appetitite to learn more about CSS!
--
HTH,
Kevin Spencer
Microsoft MVP
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net