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 Add Iconography

Posted by Katrina Pyne
Katrina Pyne
991 Points

Hello there, I'm having issues getting my CSS to link to specific classes

Hi there,

So i made classes in html for profile-photo and that seems to be working but i'm having issues with my class contact-info. I made it is in the html file but when i apply changes in CSS they aren't showing up and i don't see any syntax errors on either end. Am i missing something?

HTML:

<h3>Contact Details</h3>
        <ul class="contact-info"></ul>

CSS:

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}
jaredcowan
jaredcowan
11,808 Points

Your HTML isn't showing.

Dustin Matlock
Dustin Matlock
33,856 Points

Hi Katrina, I went ahead and fixed code highlighting for you.

Posting Code on Treehouse

wuworkshop
wuworkshop
3,429 Points

Dustin Matlock Awesome GIF! Did you make that? If so, how did you make it?

Dustin Matlock
Dustin Matlock
33,856 Points

imouto, PS usually works, but I use one called GIF Brewery.

3 Answers

jaredcowan
jaredcowan
11,808 Points

This the code I had and seems to work. Just see if it works for you.

If it does paste in yours and see what you had wrong so you learn from it.

HTML:

<section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
            <li class="phone"><a href="tel:123-456-7890">123-456-7890</a>
            </li>
            <li class="mail"><a href="mailto:example@example.com">Example</a>
              <li class="twitter"><a href="#">Example</a></li>
        </ul>
      </section>

CSS: 

/**********************************
PAGE: CONTACT
***********************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}
Katrina Pyne
Katrina Pyne
991 Points
Katrina Pyne
Katrina Pyne
991 Points

Hmm strange, i don't seem to be able to post it. The comment deletes the html once i post. But it was exactly from the example in the video

Katrina Pyne
Katrina Pyne
991 Points
Katrina Pyne
Katrina Pyne
991 Points

Got it! Had a syntax error...go figure. Thanks!!