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 trialJesse Lisser
4,161 PointsMy link/anchor elements are colored blue. Where is it set to the default text color in the example?
I have the
body a { text-decoration: none; }
selector, but this only removes the underlines.
I could probably fix it by selecting the anchor elements and setting the color property to the default color. But what is the best way to do this? I'd like to know the cleanest way possible.
Best,
Jesse
1 Answer
Brian MacDonald
4,951 PointsHello Jesse,
Hyperlinks by default have a linked, active and visited state. There states will show a blue, red and purple color based on if it has been visited before.
With CSS there is many ways to achieve things, such as what you have above you can change the state of all <a> tags to have no underline, as well as many other things: color, line-height, font-weight, you name it! That being said, changing the color this way will also cause them all to be a certain color, and lose the state functionality (link, active, visited) and you will also have to add a hover state if you want it to appear such when a user is interacting with it. The other downside is EVERY <a> on your site will follow these rules.
You could also manipulate these styles by using ids, classes, or a combination of the both to target different areas. There is some good treehouse demos on this exactly - I will have to lookup their links, in the meantime however I suggest checking out the css pseudo-classes for styling links (:active, :visited, :link, :hover):
- http://www.w3schools.com/css/css_link.asp
- https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive
- https://developer.mozilla.org/en-US/docs/Web/CSS/:link
- https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
- https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
This method allows you to manipulate <a> tags, while keeping that state functionality you can still also target specific classes, id's etc with this method!
I hope this helps,
Brian
Jesse Lisser
4,161 PointsJesse Lisser
4,161 PointsThank you Brian for your answer!