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

HTML Introduction to HTML and CSS (2016) HTML: The Structural Foundation of Web Pages and Applications Anchor Tags

Ian Johnson
Ian Johnson
2,749 Points
Posted by Ian Johnson
Ian Johnson
2,749 Points

How 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
jb30
44,805 Points

To 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
Ian Johnson
2,749 Points
Ian Johnson
Ian Johnson
2,749 Points

Cracking. 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.