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

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;
}

Your HTML isn't showing.

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

Posting Code on Treehouse

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

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

3 Answers

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');
}

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

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