Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Ian Johnson
Ian Johnson
1,518 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

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
1,518 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.