How to change Link color in HTML?

Question

Greeting to all,

I am studying HTML with CSS and I am still in the process of learning, I created a keyword, IE, when the page is above 992px wide it shows the menu, when it is less than 992px it hides a menu and appears an icon and when it wants to click appears the menu.

The problem is I can’t insert the color into the link source within max-width, that’s all.

my complete project is here

That’s the part of the code I’m struggling with.

    <nav class="navegacao">
          <img src="images/logo.png" width="320" height="100">
        <div class="navegacao_menu">
            <button class="botao-chaveador js-botao-chaveado"></button> 

            <ul class="menu  js-menu">
                <li class="menu_item">
                    <a href="#">Home</a>
                </li>
                <li class="menu_item">
                    <a href="#servicos">Nossos Serviços</a>
                </li>
                <li class="menu_item">
                    <a href="#">Imóveis</a>
                </li>
                <li class="menu_item">
                    <a href="#">Nos conheça</a>
                </li>
                <li class="menu_item">
                    <a href="#">Contatos</a>
                </li>
            </ul>
        </div>  
    </nav>

This is the part of the code that involves the problem;

.menu{
    margin: 0;

    font-size: 1.8rem;

    list-style: none;
}


@media(max-width: 991px){

    .menu{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 200px;
        display: none;
        background-color: #bfbfbf; 
        border-right: 1px solid #eee;
    }

    .menu a{
        color: black;
    }


    .menu--exibindo{
        display: block;
    }

    .menu_item{
        display: block;
        line-height: 3;
    }
}


@media(min-width: 992px ){
    .menu_item{
        display: inline-block;
        padding-right: 20px;
        line-height: 8.5;
    }
}

I tried that way, but it didn’t work;

.menu a{
        color: black;
    }

I could put this code outside of max-width and min-width, and it would work, but if I do this it will stay fixed colors with both low and high resolution and that is not the goal.

Answer 1

Since you are using bootstrap in your code, its style will prevail, we can arrange this in two ways: 1-) As stated in the first reply

2-) Giving importance to your code:

 .menu{
 margin: 0;

 font-size: 1.8rem;

 list-style: none;
 }


@media(max-width: 991px){

.menu{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    display: none;
    background-color: #bfbfbf; 
    border-right: 1px solid #eee;
}

.menu a{
    color: black !Important; /* Colocamos !Important na frente para que o código tenha preferencia */
}


.menu--exibindo{
    display: block;
}

.menu_item{
    display: block;
    line-height: 3;
    }
}

Answer 2

That’s coming together because you’re wearing bootstrap.min he has an element Anchor (a) , with a preset color if you want to change the color you will have to override its rules or change in itself bootstrap.min yesterday has the link color.

a{color:#337ab7;text-decoration:none}.