I am programming a flask application. In that I have a main html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table generator</title>

    <link rel="stylesheet" href="/static/lib/skeleton/normalize.css" />
    <link rel="stylesheet" href="/static/lib/skeleton/skeleton.css" />
    <link rel="stylesheet" href="/static/style.css" />
</head>
<body>
    <div class="container">
        <ul class="navigation">
            <li class="navigation-item">
                <a href="/">Home</a>
            </li>
            <li class="navigation-item">
                <a href="/instructions">Instructions</a>
            </li>
        </ul>

        {% block content %}{% endblock %}
    </div>
</body>
</html>

for my stylesheet I linked this css file:

.navigation {
    list-style-type = none;
}

But when I am running the file the list still looks like this: enter image description here

I want my list to not have the dots in front. What am I doing wrong?

1 Answers

2
Community On

This code will work, you need to apply that style to the list element itself.

.navigation li{
  list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table generator</title>

    <link rel="stylesheet" href="/static/lib/skeleton/normalize.css" />
    <link rel="stylesheet" href="/static/lib/skeleton/skeleton.css" />
    <link rel="stylesheet" href="/static/style.css" />
</head>
<body>
    <div class="container">
        <ul class="navigation">
            <li class="navigation-item">
                <a href="/">Home</a>
            </li>
            <li class="navigation-item">
                <a href="/instructions">Instructions</a>
            </li>
        </ul>
    </div>
</body>
</html>