How can I have two different styles of hyperlink text on one page?

Question

Hi
I'm using an external css document to control the look of my site, and would like to have two differnet types of hyperlink.
One for within the content text, which would be the same size and style as the content text, and one that is BIGGER and BOLDER for 'title' hyperlinks.
At the minute I have one set up for the content text, which is:
a:link {
color: #0000CC;
text-decoration: none;
a:visited {
text-decoration: none;
color: #666666;
a:hover {
text-decoration: underline;
color: #0000CC;
a:active {
text-decoration: none;
color: #666666;
How can I set another style up for the title links without affecting the look of the content links??

Answer 1

Pseudo-classes & Descendant selectors is what you're after...
From your example, I would leave those styles for your standard links and would create new rules for the content area and then follow similar for your 'titles' or you could use Headings <h1> are they are actually headings that you want styled.
The following is assuming that you have used a Div or a container with an ID of mainContent.
#mainContent a:link {
     text-decoration: underline;
     color: #66CC99;
#mainContent a:visited {
     text-decoration: underline;
     color: #66CC99;
#mainContent a:hover {
     text-decoration: none;
     color: #333333;
     background-color: #FFFFFF;
#mainContent a:active {
     text-decoration: underline;
     color: #66CC99;
For another area of the page, say a left sidebar and gave it an ID of #leftcolumn 
(I've used the same styles for easier copying pasting, but naturally, you would style then differently)
#leftcolumn a:link {
     text-decoration: underline;
     color: #66CC99;
#leftcolumn a:visited {
     text-decoration: underline;
     color: #66CC99;
#leftcolumn a:hover {
     text-decoration: none;
     color: #333333;
     background-color: #FFFFFF;
#leftcolumn a:active {
     text-decoration: underline;
     color: #66CC99;