Different colored link

[djcronos]

Hi all,

I'm using an open source template from oswd.org and I wanted to change the color of one of the links to make it stand out from the others. Here's the CSS code:

.nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}
.nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px;  border-top: solid 1px rgb(200,200,200); text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}
.nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:rgb(70,122,167); font-size:120%;}
.nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;}
.nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}
 

Note the a.inquiry:hover above - I added that entire line in hopes that would change the color.

And here is the HTML in question:

        <!-- Navigation Level 3 -->
        <div class="round-border-topright"></div>
        <h1 class="first">TurnkeySolutionsNow</h1>        <!-- Navigation with grid style -->
        <dl class="nav3-grid">
          <dt><a href="whyusetsn.html">Why Use TSN</a></dt>
          <dt><a href="productdevelopment.html">Product Development </a></dt>
            <dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd>
            <dd><a href="productdevelopment-engineering.html">Engineering</a></dd>
            <dd><a href="productdevelopment-productdesign.html">Product Design</a></dd>
            <dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd>
            <dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd>
            <dd><a href="productdevelopment-industries.html">Industries</a></dd>
            <dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd>
          <dt><a href="contact.html">Contact Us</a></dt>
        </dl>                        
<p>&nbsp;</p>
      </div>
 

The link I want to change color is the Inquiry Form. I thought by adding class="inquiry" I could define the color, but I'm having issues.

Any help is appreciated - thanks in advance!

Patrick

[Death Slaught]

Hi all,

I'm using an open source template from oswd.org and I wanted to change the color of one of the links to make it stand out from the others. Here's the CSS code:

.nav3-grid {width:199px; border-bottom:solid 1px rgb(200,200,200);}
.nav3-grid dt a, .nav3-grid dt a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px;  border-top: solid 1px rgb(200,200,200); text-decoration:none; color:rgb(70,122,167); font-weight:bold; font-size:120%;}
.nav3-grid dd a, .nav3-grid dd a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:rgb(70,122,167); font-size:120%;}
.nav3-grid dt a:hover, .nav3-grid dd a:hover {background-color:rgb(225,225,225); color:rgb(42,90,138); text-decoration:none;}
.nav3-grid dt a.inquiry:hover, .nav3-grid dd a.inquiry:hover {color:rgb(90,90,90); text-decoration:none;}
 

Note the a.inquiry:hover above - I added that entire line in hopes that would change the color.

And here is the HTML in question:

        <!-- Navigation Level 3 -->
        <div class="round-border-topright"></div>
        <h1 class="first">TurnkeySolutionsNow</h1>        <!-- Navigation with grid style -->
        <dl class="nav3-grid">
          <dt><a href="whyusetsn.html">Why Use TSN</a></dt>
          <dt><a href="productdevelopment.html">Product Development </a></dt>
            <dd><a href="productdevelopment-productdevelopment.html">Product Development </a></dd>
            <dd><a href="productdevelopment-engineering.html">Engineering</a></dd>
            <dd><a href="productdevelopment-productdesign.html">Product Design</a></dd>
            <dd><a href="productdevelopment-productprotection.html">Product Protection</a></dd>
            <dd><a href="productdevelopment-engineeringservices.html">Engineering Services</a></dd>
            <dd><a href="productdevelopment-industries.html">Industries</a></dd>
            <dd><a href="productdevelopment-inquiry-form.html" class="inquiry">Inquiry Form</a></dd>
          <dt><a href="contact.html">Contact Us</a></dt>
        </dl>                        
<p>&nbsp;</p>
      </div>
 

The link I want to change color is the Inquiry Form. I thought by adding class="inquiry" I could define the color, but I'm having issues.

Any help is appreciated - thanks in advance!

Patrick

Try changing the "class" to "id" like this:

HTML:

[HTML]<a href="location" id="specialLink">Text</a>[/HTML]
CSS:

a#specialLink
{
color: black;
hover: red;
background-color: blue;
}

the CSS needs to be in an external CSS document. So now any link with the "id" 'specialLink' will have those colors.

Hope it helps, Death