override link style inside an html div

  1. In The css I would not use the id "#macrosectiontext a:link..." for the link code I would use a class ".macrosectiontext"

  2. use a lower case "a" instead of a Cap "A" in the link style

  3. If you using the style only a few times you can use a span tag around the link and then call to your style from the span tag in stead of the div.


CSS work on inheritance, so you should only override the properties you want to change.

Try always to write HTML & CSS lowercase, still your HTML and CSS are correct

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none; 
  color: #f00;
}

#macrosectiontext {
  position: relative;
  font:Arial, sans-serif;
  text-align: center;
  font-size: 50px;
  font-style: bold;
  margin-top: 245px;
  opacity: 0.6;
  background-color: transparent;
}

#macrosectiontext a:link {
  color: #000;
}
#macrosectiontext a:visited,
#macrosectiontext a:hover,
#macrosectiontext a:active {
  color: #fff;
}

I made a fiddle for you to show your code is working (changed the hover color, just for demo)