CSS is not working on Contact page?

Question

I am trying to add the 'phone, mailto and tel' icons just there are not showing up on my contact page.

I am trying to set list-style: none again its not working.

None of my CSS code is working on contact page. I checked for typos and still haven't had a break-through. Please help!

EDIT: SORRY OF THE CONFUSION. I AM FOLLOWING THE LESSONS BY CREATING MY WEBSITE ON NOTEPAD [NOT USING WORKSPACE]. THE CSS FILE IS CALLED "main.css"

Here is my ENTIRE contact page I built on NOTEPAD:

<!DOCTYPE HTML>

<html>

<head> <meta charset="utf-8"> <title> Nick Pettit | Designer </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Open+Sans:700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">

</head>

<body> <header> <a href="index.html" id="logo"> <h1> Nick Pettit </h1> <h2> Designer </h2> </a> <nav> <ul> <li><a href="index.html"> Portfolio </a></li> <li><a href="about.html"> About </a></li> <li><a href="contact.html" class="selected"> Contact </a></li> </ul>
</nav> </header> <div id="wrapper">

    <section> 
        <h3> General Information. </h3>
        <p> I am not currently looking for new design work. But I am available for speaking gigs and similiar occasion. If you have any questions,

please don't hesitate to contact me! </p> <p> Please only use contact for urgent inquries. Otherwise, Twitter and email are the best way to reach me. </p> </section> <section> <h3> Contact Details </h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-6425">555-6425</a></li> <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li> </ul>

    </section>
    <footer> 
        <a href="http://twitter.com/hasanshaz"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/shahyanhasan"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p> &copy; 2014 Nick Pettit. </p>
    </footer>

</div>

</body>

</html>

Here is my css code (from main.css for just the contact page)

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

}

.contact-info li.phone a { background-image: url('../img/phone.png'); }

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

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

Answer 1 · 2015-03-24T04:21:35Z

March 24, 2015 4:21am

it's possible that whatever issue you are having copying your code over is the cause of this, but it looks like you don't have a <html> tag, or <head> tag. If you're <title> tag, <meta> tags, and <link> tags aren't wrapped in the <head> element then they aren't going to work correctly.

Answer 2 · 2015-03-24T04:32:45Z

March 24, 2015 4:32am

I don't see your head tags.

Make sure the top of you document resembles the following:

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title> Nick Pettit | Designer </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Open+Sans:700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
  </head>
  <body>
  </body>
</html>

ETA: I don't see proper tags in general. I can't get the markdown options to work for me, but in general, you code should start with this template:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
    <--Title and links go here-->
  </head>
  <body>
    <-- Everything else goes here-->
  </body>
</html>

If that doesn't work, try adding the following to your <link> tags:

<link rel="stylesheet" href="css/main.css" type="text/css">

You don't need usually need this attribute, but if you have an older browser, it may not recognize your style sheets without it.

Answer 3 · 2015-03-24T15:54:44Z

March 24, 2015 3:54pm

You should use something besides Notepad to code with because it can add hidden stuff to your code. Or if you really want to use it, make sure it is saving as plain text and that the character encoding is set to UTF-8. I would recommend using something else, like Notepad++ or SublimeText. SublimeText comes set up to code web development stuff. Or if you don't want to pay for something Notepad++ is free, but it requires a little set up.

When designing a new page always follow the form:

<!DOCTYPE html>
<html>
    <head>
    <!-- Your title, meta tags, and css imports go here.  And possibly some javascript. -->
    </head>
    <body>
    <!-- All of you page's content goes here.-->
    <!-- JavaScript stuff generally goes just before your closing body tag -->
    </body>
</html>

Since the area you are having trouble with isn't showing the code it is hard to say what is wrong. However, double check the file path of your css and images are correct.

Also, to clear up redundancy in your code you don't need to list all of the selectors in a compounding manner. Instead of this:

.contact-info li.phone a {
     //do something
}

You can do this:

.phone a {
    //do something
}

Welcome to the Treehouse Community

Looking to learn something new?

Shahyan Hasan

Shahyan Hasan

CSS is not working on Contact page?

Preston Skaggs

Preston Skaggs

Brian Hayes

Brian Hayes

Shahyan Hasan

Shahyan Hasan

3 Answers

Brian Hayes

Brian Hayes

Sharina V. Jones

Sharina V. Jones

Preston Skaggs

Preston Skaggs