Question about changing colors of anchors

HTML-CSS
1

So obviously, when an anchor is clicked, the text turns purple to show that it has been visited.

In the Product Landing Page project, I’m trying to change the color of the text to red using the given class “.nav-link” (whether they are visited or not shouldn’t matter)

<nav id="nav-bar">
                <ul>
                    <li class="nav-link"><a href="#info-container">About Us</a></li>
                    <li class="nav-link"><a href="#pricing-container">Pricing</a></li>
                    <li class="nav-link"><a href="#email-container">Contact Us</a></li>
                </ul>
            </nav>

.nav-link{
    text-decoration: none;
    list-style-type: none;
    padding-right: 50px;
    text-transform: uppercase;
    color: red;
}

But it doesn’t work, and found I can only change it doing

a {
color: red
}

Can someone please explain why this is the case? I also tried using :visited but didn’t work either. Obviously I don’t think this is the best practice in case of other anchors on a page.

2

You probably want to use pseudo selectors.

But you shouldn’t mess too much with links. Those colors are part of the language of the internet. It would be like you were driving through a small town and instead of the usual traffic light colors, they were blue, white, and aqua.

3

I understand that, but I also didn’t want my navigation text to just be purple and blue I suppose? Thanks for the answer!

4

So, you want everyone that uses your web site to learn a different visual language?

If you don’t want to use standard links, I’d recommend using buttons.

5

Just speaking from experience, I’ve been on web sites where they’ve messed too much with the link styling and I can’t tell what are the links and it takes me a while to figure out how to use their page. Unless you are going to include a tutorial for the user, I’d recommend against it.

6

I’m not looking to change all the links in my website. I’m only looking to style the navigation bar, which uses lists and links to sections of the page. I understand keeping the standard of link styles, which I don’t intend to change. :blush:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.