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 Style New Pages

Karthik Nagarajan
Karthik Nagarajan
5,245 Points
Posted by Karthik Nagarajan
Karthik Nagarajan
5,245 Points

My classes don't seem to take effect

I am declaring classes in the html file and when I style it in the css file they don't seem to reflect any change that is intended to. Would anyone be able to tell why? None of my classes seem to work and not just this one.

Example code CSS:

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

Example code HTML:

<section>
        <h3>Contact Information</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:404-662-7729">404-662-7729</a></li>
          <li class="mail"><a href="mailto:karthik.250287@gmail.com">karthik.250287@gmail.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?
screen_name=karthik2502">@karthik2502</a></li>
        </ul>
      </section>
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Karthik,

I've edited your code so it appears correct in your post.

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

Hope this helps.

4 Answers

Josh Tregenza
Josh Tregenza
16,307 Points
Josh Tregenza
Josh Tregenza
16,307 Points

What is your html write up, are you using class="contact-info" in your ul tag?

Karthik Nagarajan
Karthik Nagarajan
5,245 Points
Karthik Nagarajan
Karthik Nagarajan
5,245 Points

Yup. I made sure I am not making spelling mistakes between the html and t css file.

Example:

''' </section> <section> <h3>Contact Information</h3> <ul class="contact-info"> <li class="phone"><a href="tel:404-662-7729">404-662-7729</a></li> <li class="mail"><a href="mailto:karthik.250287@gmail.com">karthik.250287@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet? screen_name=karthik2502">@karthik2502</a></li> </ul> </section>
<footer> <a href="http://twitter.com/karthik2502"><img src="img/twitter-wrap.png" alt="twitter-logo" class="social-icon"></a> <a href="http://twitter.com/karthik2502"><img src="img/facebook-wrap.png" alt="FB-logo" class="social-icon"></a> <p>Ā© 2014 Karthik</p>

Josh Tregenza
Josh Tregenza
16,307 Points
Josh Tregenza
Josh Tregenza
16,307 Points

Make sure you close off your ul tag and it should all work for you.

Just note that if you are doing this on a local computer and not in the treehouse workspaces, you'll need to add in the link rel for the css. In the Treehouse workspace it does that for you.

John Mutch
John Mutch
6,962 Points
John Mutch
John Mutch
6,962 Points

Without looking at the entire Html and css I can see an extra 

html <a href="mailto:karthik.250287@gmail.com">karthik.250287@gmail.com</a>

which would throw errors. Have you tried using CodePen? It has really changed my ability to get code working.

I started a Pen for your code as lifted from above...

http://codepen.io/iMutch/pen/bNwvKd via @CodePen