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

Why is my CSS code not working?

I have followed the instructions and nothing happended on my site.

Here is my css code:

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

And here is my HTML code:

<div id="wrapper"> <section> <h3>General Information</h3> <p>I am not looking for new design work.</p> <p>PLease only use phone contact for urgent issues.</p> </section> <section> <h3>Contact Details</h3> <ul cloass:"contact-info"> <li class="phone"><a href="tel:555-6425">555-6425</a></li> <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li> </ul> </section> <footer> <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> <p>ยฉ 2015 Christopher Chavez.</p> </footer> </div>

Hi Christopher,

The's a tiny typo in the misspelling of "class" in the "ul" tag.

Update that and all should be good.

2 Answers

hey ! you wanna change this :

<ul cloass:"contact-info">

with this :

<ul class="contact-info">

Does he need a space after 'li' in his CSS? He has li.phone, li.mail, li.twitter all running together right now.

Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey Brynn,

A space would be needed if it was targeting a child element of the list item.

As they are joined, it will target the list item with the class of 'phone'.

The perfect example of this is below

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

the space after 'contact-info' and 'li' means it is looking for the child List item element of the element with the class of 'contact-info' :)

Kevin VanderWulp
Kevin VanderWulp
5,180 Points

Looks like you made a typo in your ul tag. You typed cloass, should be class.