put color in a <a>

Asked

Viewed 30 times

-2

Good,

I am having a problem in a menu that I am creating, I managed to remove the underlining of the text that is defined as link but I wanted to change the color to make a text more normal... Does anyone know how to change the color of a letter ?

ul { 
    list-style-type: none;
    margin-right: 20px;
}

.menu-secundario {
    margin: 0 auto;
    width: 1280px;
    position: relative;
}

.menu-secundario li {
    float: left;
    margin-left: 5px;
    margin-right: 5px;  
    color: black;
}

a:link {
text-decoration:none;
}
<div class="menu-secundario">
            <nav>
                <ul>
                    <li><a href="">Historias</a></li>
                    <li><a href="">Linha temporal</a></li>
                    <li><a href="">Impacto da poluição</a></li>
                    <li><a href="">Percurso</a></li>
                    <li><a href="">Jogo</a></li>
                </ul>
            </nav>
        </div>

Picture of how the letters are at the moment: inserir a descrição da imagem aqui

html css

  • What happens if you add the color: <cor> in your CSS where customize links? And what :link in a:link means?

  • If you put the color in a:link the color stays the same, and I don’t know what is a:link I just tried to take the underline and it worked like this I left it

  • 2

    So I recommend that you start by trying to understand the code you’ve done, because without knowing what you’ve already done you’ll have no way of knowing what you need to do. Research what the :link makes and see if it makes sense to do it this way.

1 answer

0

According to the documentation MDN | Styling Links there are pseudo-classes intended exclusively to style links in their respective states.

These are the states in which links can exist:

  • Link (not visited) : the default state in which a link resides, when is not in any other state. This can be stylized specifically using the pseudo class :link.
  • Visited : a link when already visited (exists in browser history), stylized using the pseudo class :visited.
  • Hover the mouse : a link when passing the mouse over a user’s mouse pointer, styled using the :hover.
  • Focus : A link when it was focused (by example, moved to a keyboard user using the TAB key or similar, or programmatically focused using HTMLElement.focus()) - is stylized using the pseudo class :focus.
  • Active : a link when it is being activated (for example, clicked), stylized using the pseudo class :active.

ul {
  list-style-type: none;
  margin-right: 20px;
}

.menu-secundario {
  margin: 0 auto;
  width: 1280px;
  position: relative;
}

.menu-secundario li {
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: red;
}

a:active {
  text-decoration: none;
  color: black;
}
<div class="menu-secundario">
  <nav>
    <ul>
      <li><a href="">Historias</a></li>
      <li><a href="">Linha temporal</a></li>
      <li><a href="">Impacto da poluição</a></li>
      <li><a href="">Percurso</a></li>
      <li><a href="">Jogo</a></li>
    </ul>
  </nav>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.