PDA

View Full Version : Is it possible to have 2 active link styles in one embedded CSS sheet?


Mythblstr
02-15-2009, 02:11 AM
Hi everyone,

This is my first question on this forum, and I'm hoping I can find some help with my limited exposure to CSS. I am developing a website for the Head Start organization that I work for. Someone else made the first couple of pages and I have been adding all of the pages since then. The guy who designed the CSS went off to college and isn't around to answer any questions.

This is the code I'm working with:

a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #CC003B;
text-decoration: underline;
}
a:active {
color: #CC003B;
text-decoration: underline;

This is for links that are sitting against a blue background. When I attempted to override this style I couldn't do it. I wanted to make links that would be against a white background but they were not visible because they are white themselves.
My question is can I create a second CSS instruction with different font color values for links without overriding the existing one?

This is the link to the website: http://eocofirc.org (http://eocofirc.org/)

I have been studying css but there are a few basics that I'm having a hard time getting past

Any help would be appreciated
Thank you in advance,
John

Cary
02-15-2009, 02:41 AM
You can have a style which will cover all links on the page, such as you already have:

a:link
a:visited
etc...

But then you need to follow that with rules targeted for specific links.

To do this, your links need to be distinguishable from other links on the page. They may have the same class, or they may be contained within an element with a certain class or a specific ID.

The links may be a list with an ID of "menu" so you could specify their styling with something like this:

#menu a:link
#menu a:visited
etc...

This styling will only apply to links within the element, #menu.

Also, take a look at this thread (http://www.dreamweaverclub.com/forum/showthread.php?t=28749).

Mythblstr
02-15-2009, 02:56 AM
Thank you very much Cary, I think I can handle trying that :-)

Mythblstr
02-15-2009, 03:41 AM
This is what I attempted to do I am posting the whole page. I called the class "sublink" and I attempted it with an ampersand infront of it and a period it didn't work either way. Can you look at this and tell me what I'm missing?


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<style type="text/css">
<!--
h3.main {font-family: Garamond; font-weight: bold; color: #333333; }
h2.sublink {font-family: Garamond; font-weight: bold; color: black; }
h4.main {font-family: Garamond; font-weight: bold; color: #333333; }
p.main {font-family: Garamond; font-size: 14px; color: #333333; }
p.footer {font-family: Garamond; font-weight: bold; font-size: 18px; color: #333333; text-align: center }

.sublink a:link {
color: black;
text-decoration: none;
}
.sublink a:visited {
color: #000080;
text-decoration: none;
}
.sublink a:hover {
color: #CC003B;
text-decoration: underline;
}
.sublink a:active {
color: #CC003B;
text-decoration: underline;
}


a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #CC003B;
text-decoration: underline;
}
a:active {
color: #CC003B;
text-decoration: underline;
}

-->
</style>
</head>

<body>
<table width="800" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td height="150" colspan="2"><img src="Header.gif"></td>
</tr>
<tr>
<td height="5" colspan="2" bgcolor="gray"></td>
</tr>
<tr>
<td width="200" valign="top" bgcolor="#000080"><p align="center"><a href="index.html">Home</a> <p align="center"><a href="communityservices.html">Community Services</a></p> <p align="center"><a href="headstart.html">Head Start</a></p></td>
<td width="600" valign="top"><h3 class="main">Welcome!</h3>
<p class="main">The Economic Opportunities Council of Indian River County is a private, non-profit 501c(a) organization chartered in 1965 for the purpose of improving the lives of low income individuals and families in Indian River County.</p>
<h2 class=sublink"><a href="headstart.html">We Need Your Help</a></h4>
<p class="main">As Federal and State dollars shrink, the number of county residents needing our help continues to rise.</p>
<p class="main">Additionally, 20% of all Head Start funding must be matched with local dollars.</p>
<p class="main">In the past, in-kind contributions made from a small group within the professional and business communities have helped us to meet our community contribution goals. But now, the time has come to appeal directly to caring citizens within our larger community so that we may continue our work.</p></td>
</tr>

<tr>
<td height="5" colspan="2" bgcolor="gray"></td>
</tr>
<tr>
<td colspan="2"><p class="footer">P.O. Box 2766 Vero Beach, Fl 32961<br>
1456 Old Dixie Highway Vero Beach, Fl 32960<br>
Phone: 772-562-4177 ~ Fax: 772-794-7597<br>
</p></td>
</tr>
</table>
</body>
</html>

Mythblstr
02-15-2009, 03:47 AM
Cary, if you look at the "We need your help" link viewing this code though a browser you'll see that it isn not visible until you hover over it, then it turns red. That is the original code that I still cannot override...... I even put the sublink class on top of the other code and it still didn't help.
Any suggestions?

Cary
02-15-2009, 04:22 AM
You have this:

<h2 class=sublink">

It's missing a double-quote.

Also, move the ".sublink a:link", etc. styling so it comes after your basic link styling instead of before it.

Hmm, you also have some missmatched opening and closing tags here:

<h2 class=sublink"><a href="headstart.html">We Need Your Help</a></h4>

Mythblstr
02-15-2009, 03:58 PM
I was hoping it was something as simple as that, Thank you again Cary I have it working now!8-)
I do have another question now that it is finally working: I know that selectors start with hash mark are for Ids and they start with a period for a class selector (according to a book I'm reading), how do I know which is more appropriate for any particular need, I'm not too sure about the difference...

John

domedia
02-15-2009, 05:53 PM
The ID attribute should only be used for unique items. This is not to do with CSS, but ith what kind of element it is.

Once an element is unique, you can also use JavaScript to apply stuff to it because it knows the ID of the element.

The class attribute is used for elements that you will find more than one occurrence of. For example, if I have a list of businesses, I might start with <div class="listing"> as a wrapper for each listing.