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

Posted by matildadigital
matildadigital
4,947 Points

How CSS Class Selections Work

I'm trying to understand how the CSS class selections work. This code challenge asked me to select the unordered list with the contact-info class, so I entered...

.contact-info ul {

}

This caused it to mis-read my font-size styling and interpret it as being incorrect. Entering...

.contact-info {

}

fixed this. How does the chain of CSS selections work? Was it looking for an unordered list inside an element with the class .contact-info? Was that went wrong?

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

.contact-info a {
  display: block;

}


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

1 Answer

Roy Penrod
Roy Penrod
19,810 Points
Roy Penrod
Roy Penrod
19,810 Points

The challenge task is asking you to select the unordered list with the contact-info class, but the CSS you wrote is trying to select the unordered list element within an element with the contact-info class. Here's what the CSS should look like:

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

Also, make sure you add that CSS to the bottom of the CSS file. The "C" in CSS stands for "Cascading" which means that it applies the styles at the top first and the styles at the bottom last.

This feature lets you add a more general style for an element near the top of the page and then overwrite some of it's style further down the page. For example, you could make the main H1 tag on the page a larger font size than the H1 tags within column containers further down the page.

I verified that the code passed the challenge.