How to change the color of the Link in HTML?

Question

How to change the color of the Link in HTML?

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

Greeting for all,

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

The problem is that I can not insert the color in the link source within max-width, that's all.

My full project is here

This is the part of the code that I'm having trouble 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 it that way, but it did not work out;

.menu a{
        color: black;
    }

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

html5 css

asked by anonymous 24.06.2016 / 11:03

2 answers

0

This is running because you are using bootstrap.min it has an anchor element, with a pre-defined color if you want to change the color you will have to override its rules or change in own bootstrap.min has the color of the link.

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

24.06.2016 / 15:02

Understanding HttpURLConnection, OutputStream, InputStream, and Buffered Writers requests for MySQL database usage string to object in javascript

score 1 · Accepted Answer

As you are using bootstrap in your code, his style will prevail, we can sort this in two ways: 1-) As it was said in the first answer

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;
    }
}