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

Posted by Shawn Thompson
Shawn Thompson
2,043 Points

CSS won't apply

I am working on the front end development track and am trying to apply CSS to my HTML but it won't link in the workspace IDE, I have tried running it outside of the work space and it seemed to work, but the bullet points from the ul are still there. I am confused because I thought the normalize CSS class was suppose to get rid of those? I have attached my code.

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shawn Thompson | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Shawn </h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class= "selected" >Portfolio"</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
      </header>
      <div>
          <section>
            <ul>
              <li>
                 <a href="img/numbers-01.jpg">
                  <img src="img/numbers-01" alt"">
                  <p>Experiemtnation with color and texture</p>
                </a>
              </li>
                <li>
                 <a href="img/numbers-02.jpg">
                  <img src="img/numbers-02" alt"">
                  <p>playing with blending modes</p>
                </a>
              </li>
                <li>
                 <a href="img/numbers-06.jpg">
                  <img src="img/numbers-06" alt"">
                  <p>80's styles of glows</p>
                </a>
              </li>
                <li>
                 <a href="img/numbers-09.jpg">
                  <img src="img/numbers-09" alt"">
                  <p>drips creating using photoshop</p>
                </a>
              </li>
                <li>
                 <a href="img/numbers-12.jpg">
                  <img src="img/numbers-12" alt"">
                  <p>Creating shapes</p>
                </a>
              </li>    
            </ul>
          </section>
          <footer>    
            <img src="img/twitter-wrap.png" alt="Twitter">
           <a href="https://www.facebook.com/"><img src="img/facebook-wrap.png" alt="Facebook"></a>
            <p>&copy; 2015 Shawn Thompson.</p>
          </footer>
      </div>
  </body>
</html>
main.css 
a{
 text-decoration: none; 
}

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

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

a{
  color: #6ab47b;
}

header {
 background: #6ab47b;
  border-color: #1cb37a;
}

nav a.selected, nav a:hoover {
    color: #32673f;
}

3 Answers

Michael Hulet
Michael Hulet
47,913 Points
Michael Hulet
Michael Hulet
47,913 Points

Make sure that your main.css file is in a folder named "css" that is in the same folder as your index.html file. Also, Normalize will not remove the bullet points for you. To remove the bullet points, you should use:

li{
  list-style: none;
}
Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

A couple things might be the problem. for starters, you have multiple img tags with alt attributes missing the equals sign. 

<img src="img/numbers-12" alt="">

and finally, what could possible be the answer would be adding the missing type and rel attributes on your stylesheet links

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

I hope this helps.

Shaun Moore
Shaun Moore
6,301 Points
Shaun Moore
Shaun Moore
6,301 Points

Also you have put Hoover

nav a.selected, nav a:hoover {

(I'd change that :P )