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

HTML How to Make a Website Adding Pages to a Website Add and Style Icons

Peter Niceberg
Peter Niceberg
1,078 Points
Posted by Peter Niceberg
Peter Niceberg
1,078 Points

Select the unordered list with the class contact-info and set the font size to 0.9em. Then, remove all margin, padding,

Select the unordered list with the class contact-info and set the font size to 0.9em. Then, remove all margin, padding, and list styling.

This is my code, but when I check it, it comes back with the message: "X Bummer! Be sure to set the font size to 0.9em."

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

What am I missing here?

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}

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

5 Answers

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

That's true, if you use just .contact-info in your stylesheet it'll affect any element with that class name.

The second example ul.contact-info, by not having a space between the element and class name in your selector, it interprets it as the class name belonging to the ul element, rather than ul .contact-info - a child of the ul element.

If it's still not fully clarified, you can see further examples here: w3schools - CSS .class Selector

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

Well it's up to you, you could either have the selector as just .contact-info as it's the only element that has that class name, or you can use ul.contact-info (note no spaces) to help remind you that it's an unordered list. The latter is probably the best practice, especially if working in a team, but it's common to see either way used.

If you reversed it and tried ul .contact-info (with a space) - it would look for a child of the unordered list so again the styles wouldn't work as intended.

Hope that has helped clear things up a bit.

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

Hi Peter,

Your selector .contact-info ul isn't quite right - this indicates you're selecting an unordered list that's a child of an element with a class of contact-info.

Peter Niceberg
Peter Niceberg
1,078 Points
Peter Niceberg
Peter Niceberg
1,078 Points

Hi Joel, Thanks for your reply. I appreciate your reply. So you're saying I should reverse it? That way I'm selecting something with a class of contact-info that is part of an unordered list? Not entirely clear on this, and do appreciate the help.

Peter Niceberg
Peter Niceberg
1,078 Points
Peter Niceberg
Peter Niceberg
1,078 Points

Yep, it does. But it does beg one other question. If I did it just using .contact-info, that would mean it would be the style for anything styled with that class, correct? So I couldn't use .contact-info anywhere else, as it would decrease the font size as per the value (.9em). The second example, ul.contact-info is a separate class from .contact-info, no? Thanks for your indulgence. Once I clarify this, it will help immeasurably.