Link to home
Start Free TrialLog in
Avatar of Bradley Smith
Bradley SmithFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Override CSS Rule

Hey Guys,

I have built a website using Dreamweaver & an external CSS style sheet, that controls the colours of my hyperlinks.  Things such as Hover, Colour when clicked and the colour of the link.  On one of the pages i want one link to be a different colour to the rest.  

I highlighted my text i want to be different, and clicked new CSS rule, i then selected Class, give it a new name of pdf_link, clicked OK & defined how i wanted it to look.  I then selected the style pdf_link to the highlighted text but it seems as if it is getting over ridden by my first CSS that exists for the other links on the page.  How can i fix this so i can make one link what ever colour i want and it is not defined by the original CSS rule.

My code says this: class="pdf_link">here</a>

Thanks
Avatar of theodorejsalvo
theodorejsalvo
Flag of United States of America image

The order in which the CSS loads determines what gets applied to it.  Your code is fine.
if you want to force a style then add important! to that property.
Avatar of Bradley Smith

ASKER

why is the colour of the one link not changing then?  i have defined it in the external style sheet but it is not changing.  

in my external style sheet i have this:

A:link {

      color: #666666;
      text-decoration:none;
}



A:visited {

      color: #666666;
      text-decoration:none;
}



A:hover {

      color: #800122;
      text-decoration:underline;
}



a:hover.m {

      color: #1E5AAB;
      font-weight:bold;
      text-decoration:none;
}
.pdf_link {
      font-family: Geneva, Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: #0000FF;
      text-decoration: underline;
}

Thanks
Try this for your css:
 

.pdf_link a {
      font-family: Geneva, Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: #0000FF;
      text-decoration: underline;
}

Open in new window

it goes bold, but the colour does not change, it says it is blue in the rule, but when the text is clicked in dreamweaver text colour is grey.  I cant even select the text and say blue.
Assuming you want the same color and other styling for all states (visited, active, hover), this should fix your problem.
.pdf_link a:link, .pdf_link a:visited, .pdf_link a:active, .pdf_link a:hover {
      font-family: Geneva, Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: #0000FF;
      text-decoration: underline;}

Open in new window

Im copying and pasting this from here into my external style sheet call style.css, im then highlighting the link i want to be different and selecting pdf_link from the style list.  saving both and previewing & it does not make any difference, im so confused!
Please post all of your code or post a live link.
ASKER CERTIFIED SOLUTION
Avatar of stehardy88
stehardy88
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial