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 and Style Icons

Font-Size Error

Error says be sure to set font size to 0.9em. This is what I have

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

This can be found on the first part of the code challenge in stage 7 of how to make a website.

3 Answers

Stone Preston
Stone Preston
42,016 Points

You are close, but your selector is incorrect. the task asks you to select the unordered list with the class contact-info. Your selector selects unordered lists nested in elements that have a class of contact-info. They are not the same thing. You also didnt set the margin to 0, you used 0 auto.

What you have:

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

what you should have:

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

I just tried it myself and got stuck for 5 minutes.

It's just a poorly worded question, what i did was preview the code then inspect element on the ul. The ul has the class of 'contact-info' so the correct css is:

.contact-info {
 [stuff]
}

Instead of

.contact-info ul {
[stuff]
}
Stone Preston
Stone Preston
42,016 Points

thats still technically incorrect, although the challenge might let you get through with it. That selects any element with the class of contact-info. All you are wanting to select are unordered lists with the class of contact-info.

Technically incorrect for the question i guess but i was with the understanding that it's pretty poor CSS practice to prepend class selectors with an attribute?

Stone Preston
Stone Preston
42,016 Points

Hmm im not sure about that, although it may be true. I dont see any reason why it would be poor practice, it simply allows you to target a specific element with a specific class. care to elaborate on why its poor practice?

Well using ul.contact-info adds 2 levels of specificity vs .contact-info.

So if i was for arguments sake write:

<ul class="contact-info list-style-none">
  <li>1</li>
  <li>2</li>
</ul>
ul.contact-info {
  list-style: bullet;
}
.list-style-none {
  list-style: none;
}

I can no longer overwrite any css that is in this declaration with just an class. So the added class of "list-style-none" wouldn't work but if the top declaration was just .contact-info then it can be overwrote.

We should just be using better class names instead of prepending them with attributes.

Stone Preston
Stone Preston
42,016 Points

ah I get what you are saying. I guess it really depends on the situation and the desired level of specificity in your selectors/class names.

It can be okay on smaller/personal projects but once you have used it once you then need to start using it everywhere since you won't be able to overwrite things again unless you prepend the attribute.

I appreciate the help guys. Dan, you make a good point but for the sake of this particular question Stones response made more sense for me.

No worries dude, glad you got it sorted :)