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 trialIan Johnson
2,749 PointsHow do I change the colour and background/add a border to a hyperlink - rather than it simply being blue text?
Sorry this is long winded, thank you for anyone taking the time to read this.
I changed <p class="tag location"> to an anchor tag with href attribute that successfully directs via a new tab to Google Maps to show my hometown (Manchester, UK), however, that produced a hyperlink that gets lost in the background image.
I've tried to copy and add parts of the .tag section to the .location section in the style sheet to try and achieve a similar colour and border, but with no luck.
What do I need to add in the style sheet to change the colour of the hyperlink text and preferably add a border around it - to distinguish it from the background, like it was before I changed it? Do I need to change the reference from .location to something else? I've tried .href/.a/etc. but I'm stuck.
'My' code is as follows:
index.html
<p class="tag location">My home is Salem, Oregon.</p>
Changed to...
<p><a href="https://www.google.com/maps/d/viewer?mid=1GROja-WYq6OtetLsH7tQpHfcXZk&msa=0&ll=53.48111724818489%2C-2.2429604999999952&z=14" target="_blank">My home is Manchester, England</a></p>
styles.css
.location { background-color: #222; color: white; }
Changed to...
.location { background-color: #e2e2e2; color: white; padding: 10px; border-radius: 5px; display: table; margin: 10px auto; }
1 Answer
jb30
44,806 PointsTo select a link in .location
, change .location
to .location a
.
.location a {
background-color: #e2e2e2;
color: white;
padding: 10px;
border-radius: 5px;
display: table;
margin: 10px auto;
}
You might also want to have more colour contrast between your background colour and text colour.
Ian Johnson
2,749 PointsIan Johnson
2,749 PointsCracking. Thanks for your help jb30.
I worked out that the actual issue was in the index.html file, as I needed to change:
<p class="tag location">My home is Salem, Oregon.</p>
to an anchor tag with the class=location:
<a class="location" href="https://www.google.com/maps/d/viewer?mid=1GROja-WYq6OtetLsH7tQpHfcXZk&msa=0&ll=53.48111724818489%2C-2.2429604999999952&z=14" target="_blank">My home is Manchester, England </a>
Thanks again.