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 Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

Why is the list-style not working?

Why is the default style not going away from the links when I use this CSS?

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Espresso | Dev and Design</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <header>
      <a href="index.html">
        <h1>Espresso</h1>
        <h2>Development & Design</h2>
      </a>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <p>Hello! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </section>
    <footer>
        <p>&copy; Espresso LLC. 2015</p>
    </footer>
</body>
</html>

Here is my HTML:

a {
    list-style: none;
}

Other changes work.

4 Answers

Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

Okay, I figured it out. The list-style did what it was supposed to do, get rid of bullet points on the unordered list. It was text-decoration: none; that I was looking for, it gets rid of the under lining on the links.

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Yoo it's also supposed to be on the < ul > or the < li >, not the anchor tags < a >, in your css.

Tony Nguyen
Tony Nguyen
24,934 Points

This is also true.

Caleb Kleveter
MOD
Caleb Kleveter
Treehouse Moderator 37,862 Points
Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

Nothing.

Jeff Lemay
Jeff Lemay
14,268 Points

No idea. It's the list-style or list-style-type property. Try adding an !important tag. If you inspect the element do you see the property?

Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

I'm not really sure what your talking about.

Caleb Kleveter
MOD
Caleb Kleveter
Treehouse Moderator 37,862 Points
Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

Neither worked. Y'all can copy-paste into workspaces or something to play around with it if you want.

Jeff Lemay
Jeff Lemay
14,268 Points 
nav ul li {
   list-style: none;
}