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 How to Make a Website Adding Pages to a Website Build the Contact Page

Jason Plett
Jason Plett
1,415 Points

link color not working

I am having an issue with both my about and contact links to twitter, phone etc, the color of my background is black and the text of the links is black as well. I have been unable to locate by trial and error what I need to do to change the color of those links.

about info

<section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="Tel:555-632-1419">555-632-1419</a></li> <li class="mail"><a href="mailto:jasonplett@gmail.com">jasonplett@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=jasonplett">@jasonplett</a></li> </ul> </section>

this is my CSS

/********************************* GENERAL **********************************/

body { font-family: 'Cinzel', serif; }

a { text-decoration:none; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/********************************* Heading **********************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Cinzel', serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal;

}

/********************************* Navigation **********************************/

nav { text-align: center; float: left; padding: 10px 0; }

nav li { display:inline-block; }

nav a { font-weight:700; padding: 15px 10px; }

/********************************* Footer **********************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #777 }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/********************************* Page: Portfolio **********************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #000; color: #999; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #888; }

/********************************* PAGE: About **********************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/********************************* Colors **********************************/

/Logo Text/

a { color: #000000; }

/*Nav background on mobile devices */ nav { background: #000 }

/* site body */ body { background-color: #000; color: #999; } /*Black Header Grey Border */ header { background: #000; border-color: #888; } h1, h2 { color: #888 } /*Color for Nav Link Grey */ nav a, nav a:visited { color: #888;
}

/* Selected nav Link */ nav a.selected, nav a:hover { color: #fff }

p { color: #999; }

1 Answer

Frances Angulo
Frances Angulo
5,311 Points

At first glance, it looks like you're trying to label everything with an

<a>

tag to have a certain color. I'm not 100% versed in the latest HTML/CSS syntax, but I think you'd have to define the <li> tags or maybe the classes you defined for each one. I'm not sure why you did classes for every data entry unless you're going to do special style for each one? maybe something like this would work:

ul.contact-info {
}
Jason Plett
Jason Plett
1,415 Points

That was it, the a tag. I have also since learned to use inspect element in chrome with great success. Thank you for your time.