CODEWITHSUNDEEP
css
Meganekogekkilove
Meganekogekkilove

Reputation: 1

How Do I Set Classes For Different Links To Have Different Colors?

I'm working on a project for school, and I wanted the three links I have to be set to the different colors I need. But when I call a class in my CSS file, I'm told:

Unknown property 'a'. Expected RBRACE at line 12, col 11.

How can I set different classes so that my different links are different colors? Below is my CSS code.

body {
  background-color: white;
  color: black;
  src: url('PressStart2P-Regular.ttf') format('truetype');
  font-family: Times;
}

.colorlink {
  /* unvisited link */
  a:link {
    color: darkred;
    text-decoration: underline;
  }
  /* visited link */
  a:visited {
    color: green;
  }
  /* mouse over link */
  a:hover {
    color: hotpink;
  }
  /* selected link */
  a:active {
    color: powderblue;
  }
  a:link {
    text-decoration: none;
  }
  a:visited {
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  a:active {
    text-decoration: underline;
  }
}

Upvotes: 0

Views: 76

Answers (2)

HijenHEK
HijenHEK

Reputation: 1296

you are using a inside .colorlink selector , so it saw it as a property not a selector , thus its Unknown , you cannot nest selectors in css

what you can do instead is use multiple selectors like this :

a.colorlink:link  {
    color: darkred;
    text-decoration: underline;
    }

  /* visited link */
  a.colorlink:visited {
    color: green;
    }

  /* mouse over link */
  a.colorlink:hover {
    color: hotpink;
    }

  /* selected link */
  a.colorlink:active  {
    color: powderblue;
    }
  a.colorlink:link {
    text-decoration: none;
    }

  a.colorlink:visited {
    text-decoration: none;
    }

  a.colorlink:hover {
    text-decoration: underline;
    }

  a.colorlink:active {
    text-decoration: underline;
    }

to only remove a style

a {
 color : inherit ;
 text-decoration : none ; 
}

Upvotes: 2

Behemoth
Behemoth

Reputation: 9310

The error appears because it is not possible to use nested styles in pure CSS. Thus CSS thinks you are trying to a CSS-Property to .colorlink. Use a preprocessor like SCSS for that.

Besides, I assume you are trying to achieve something similar like this:

body {
  background-color: white;
  color: black;
  font-family: Times;
}

.link1 {
  color: green;
}

.link2 {
  color: red;
}

.link3 {
  color: blue;
}

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

a:hover {
  color: hotpink;
}

a:active {
  color: powderblue;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}
<a href="#" class="link1">My Link</a>
<a href="#" class="link2">My Link</a>
<a href="#" class="link3">My Link</a>

Upvotes: 0

Related Questions