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 trialKatrina Pyne
991 PointsHello 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;
}
Dustin Matlock
33,856 PointsHi Katrina, I went ahead and fixed code highlighting for you.
wuworkshop
3,429 PointsDustin Matlock Awesome GIF! Did you make that? If so, how did you make it?
Dustin Matlock
33,856 Pointsimouto, PS usually works, but I use one called GIF Brewery.
3 Answers
jaredcowan
11,808 PointsThis 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
991 PointsHmm 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
991 PointsGot it! Had a syntax error...go figure. Thanks!!
jaredcowan
11,808 Pointsjaredcowan
11,808 PointsYour HTML isn't showing.