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

sean farrelly
sean farrelly
1,614 Points
Posted by sean farrelly
sean farrelly
1,614 Points

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

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

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

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


nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 0
}

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

1 Answer

Luke Towers
Luke Towers
18,572 Points
Luke Towers
Luke Towers
18,572 Points

This question is asking you to select an ordered list element with a class of contact-info and set four properties (font-sizing, padding, margin, and list-style).

To select the ordered list element with a class of contact info, first type in ol (for the ordered list element), followed by .contact-info (for the contact-info class). Remember, the . character means that you are selecting a class, and just the name of the element means that you are specifying a type of element. By combining those two selectors, you are saying that you wish to select an ordered list element with the class of contact-info.

ol.contact-info {
}

Next, you want to set the font-size, padding, margin, and list-style properties on that selected element. To modify the properties of a selected element, just put the name of the property you wish to modify followed by a colon character and then by the value you wish it to have and finally by the semi-colon character to signify the end of that property declaration. So, the code would be like so:

ol.contact-info {
   font-size: 0.9em;   /* Sets the font size to 0.9em */
   margin: 0;              /* Removes any margin */
   padding: 0;            /* Removes any padding */
   list-style: none;      /* Removes any list style */
}