Bradley Smith
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
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
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.
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
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;
}
ASKER
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;}
ASKER
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.