Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Peter Ternouth
Peter Ternouth
1,695 Points

Different CSS link Styles

I have developed a link style for my webpage using a:link{}. My initial links were a contents list on a dark background, so I made the links 'white'.

Later I added some in-page navigation links, which I now want to give different styling too, as the body background is a light grey. However, the a:link{} is over-riding the class="" styles that I am using to style the in-page navigations links.

Does anyone know how to have a number of different link styles on a page?

2 Answers

Peter Ternouth
Peter Ternouth
1,695 Points
Peter Ternouth
Peter Ternouth
1,695 Points

Hi Leon

thanks for your answer. I was aware of the specificity issue, but am novice at applying it. Unfortunately your suggested solutions, didn't work for me. I have tried it using both a div and class= settings to identify the Pseudo-class over-ride, with no joy. It maybe that I am doing something else wrong, but without inspecting the entire code, not sure how to address that. Interestingly, depending on whether I bring the page up in Safari, Chrome, Internet Explorer or Edge, it behaves differently.... looks like I might need to spend some time working out my media declarations....

I have done an alternate workaround. In order to allow the a:link{} to be the same throughout, I have put my in-page navigation links inside a box with a similar colour to the header background, hence I don't need to over-ride it.

Thanks again

Peter

dzttnnlmgq
dzttnnlmgq
2,432 Points

Hello again!

I can't say I understand as to why it hasn't worked. I am sorry I couldn't be of more use, anyhow if you do find the problem, I'd be interested to know as to why it has seemed to over-rule the specificity.

Thanks, Leon.

Paweł Bis
Paweł Bis
4,060 Points
Paweł Bis
Paweł Bis
4,060 Points

Maybe try something like this: a.class-ot-the-link { your-style: something; }? "a.class" - no space between .class and a.

dzttnnlmgq
dzttnnlmgq
2,432 Points
dzttnnlmgq
dzttnnlmgq
2,432 Points

Hey Peter,

As I am sure you understand, each selector has a different specificity, this is a weight that is applied to each declaration in which a selector with a higher specificity (stronger weight) will override those properties of a lower specificity.

I believe that the class attribute should work, perhaps try to use a more specific selector such as the element element selector. As an example, this should override the global selector you have used:

a:link{
    text-decoration: none;    /* This is your stated global selector, this will override the universal selector and/or the default css browser values */
    color: #ffffff;
}

div a:link { 
    text-decoration: none;    /* This should override the global 'a:link' selector */
    text-align: center; 
    display: inline-block;
    color: #000000
}

div p a:link { text-decoration: none;    /* This should override the 'div a:link' selector  */
    color: #353535;
}

/* If the links are in different elements, change the CSS above accordingly. H1 instead of P, Header instead of DIV etc */

Hope this helps, let me know if it works. If it does not work, go easy on me, I myself am just starting out on teamtree.

I should note, definitely do not attempt to use the ID selector for multiple attributes as it can cause issues with back-end development, this seems to be a job for the Class attribute however it does not seem to like your webpage.

Kind Regards, Leon.