Question 215921 in CSS Question posted in
Some basic documentation can be found here.

Css – Any anchor elements have white text

I have this exam where it wants me to make any anchor elements white text.
I have tried all I know, but doesn’t seem to be accepting it. I have not found any help to try to uncover what it means, all it says when I check answers is did I make <a> color #FFFFFF

Any help on this would be appreciated

html,
body {
  margin: 0;
  height: 100%;
  background-color: rgba(216, 27, 96, 0.6);
}

h2 {
  color: #FFCC00;
  font-family: 'Varela Round', sans-serif;
  font-size: 26px;
  font-weight: 100;
  text-align: center;
}

h4 {
  color: #FFCC00;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase
}

a {
  color: #FFFFFF;
  text-decoration: underline;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

.wrapper {
  position: relative;
  margin: auto;
  padding: 0;
  max-width: 75vw;
}

.midground,
.foreground {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  margin: 15vh 0 0 15vw;
  padding: 0;
  width: 35vw;
  height: 59vh;
}

.midground {
  background-color: hsla(208, 79%, 51%, 0.4);
}

.foreground {
  background-color: hsla(45, 100%, 51%, 0.1);
}
Tags:

2

Answers


  1. 0

    The problem can be that your other CSS code overrides the color: #ffffff;. This can be fixed by increasing the rule importancy:

    a {
  color: #fff !important;
}

    Also, you should set styles for specific states, too. I listed here the most important states:

    :hover

    This applies when user hovers mouse cursor over the link.

    a:hover {
  color: #efefef !important;
}

    :active

    This applies when user clicks the link.

    a:active {
  color: #eee !important;
}

    :visited

    This applies after user visited the link in close history instead of normal style.

    a:visited {
  color: #fff !important; /* Disabling the behavior by setting the same value as the main style */
}

    Note: If you find out that something works without the !important, you can remove it.

    Login or Signup to reply.
  2. 0

    Instead of just a as a selector for your css rule you should use a:link, and you might also want to combine that with a:visited, so the link stays the same way after it has been visited for the first time by a user. So the complete rule would be:

    a:link, a:visited {
  color: #FFFFFF;
  text-decoration: underline;
  cursor: pointer;
}

    Full example:

    html,
body {
  margin: 0;
  height: 100%;
  background-color: rgba(216, 27, 96, 0.6);
}

a:link, a:visited {
  color: #FFFFFF;
  text-decoration: underline;
  cursor: pointer;
}

a:hover, a:active {
  text-decoration: none;
}
    <a href="#">some link text</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search