How can I give black color to a text in anchor tag?

Question

 footer { position:absolute; right:0; left:0; bottom:0; width:100%; background:#3586ff; min-height:100px; display:flex; justify-content:center; align-items:center; flex-direction:column; } footer.awesome, footer.menu { position:relative; display:flex; justify-content:center; align-items:center; margin:10px 0; } footer.awesome li, footer.menu li { list-style:none; } footer.awesome li a { font-size:2em; color:#fff; margin:0 10px; display:inline-block; transition:0.5s; } footer.menu li a { font-size:1.1em; color:#fff; margin:0 10px; display:inline-block; text-decoration:none; opacity:0.75; } footer.awesome li a:hover{ transform:translateY(-10px); } footer.menu li a:hover{ opacity:1; } footer p{ color:#fff; margin-top:15px; margin-bottom:10px; text-align:center; font-size:1.1em; } footer.wave{ position:absolute; top:-100px; left:0; width:100%; height:100px; background:url("https://res.cloudinary.com/tribune-blog/image/upload/v1662378167/wave_lyplfl.png"); background-size:1000px 100px; } footer.wave#wave1{ z-index:1000; opacity:1; bottom:0; animation: animatewave 4s linear infinite; } footer.wave#wave2{ z-index:999; opacity:0.5; bottom:10px; animation: animatewave_02 4s linear infinite; } footer.wave#wave3{ z-index:1000; opacity:0.2; bottom:15px; animation: animatewave 3s linear infinite; } footer.wave#wave4{ z-index:999; opacity:0.7; bottom:20px; animation: animatewave_02 3s linear infinite; } @keyframes animatewave{ 0% { background-position-x:1000px; } 100% { background-position-x:0px; } } @keyframes animatewave_02{ 0% { background-position-x:0px; } 100% { background-position-x:1000px; } }

 <footer> <div class="waves"> <div class="wave" id="wave1"></div> <div class="wave" id="wave2"></div> <div class="wave" id="wave3"></div> <div class="wave" id="wave4"></div> </div> <ul class="awesome"> <li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li> <li><a href="#"><ion-icon name="logo-twitter"></ion-icon></a></li> <li><a href="https://www.instagram.com/tribuneblogger/"><ion-icon name="logo-instagram"></ion-icon></a></li> </ul> <ul class="menu"> <li><a href="#">HOME</a></li> <li><a href="#">POLICY</a></li> <li><a href="#">DISCLAIMER</a></li> <li><a href="#">CONTACT</a></li> </ul> <p>©2022 TESTING | All Rights Reserved</p> <p> Made with&nbsp; <i class="fa-sharp fa-solid fa-heart"></i> &nbsp;by <a href="https://www.instagram.com/iallenmathew">USER</a></p> </footer>

Actually, I am new in coding, I wanted to give the text "USER" in a tag color black, how can I give it. Can someone help me what can I do in CSS to make the color black.

Answer 1

Try to add this code into your stylesheet:

footer > p > a{
  color:black;
}

If you need to remove underline as well:

footer > p > a{
  color:black;
  text-decoration:none;
}

Answer 2

add class for your ex `

 .blacked{ color:black; }

 <p> Made with&nbsp; <i class="fa-sharp fa-solid fa-heart"></i> &nbsp;by <a class="blacked" href="https://www.instagram.com/iallenmathew">USER</a></p>

` in your stylesheet: add this

.blacked{
  color:black;
}

 <p> Made with&nbsp; <i class="fa-sharp fa-solid fa-heart"></i> &nbsp;by <a href="https://www.instagram.com/iallenmathew">USER</a></p>

 .blacked{ color:black; }

for more style see that https://www.w3schools.com/css/css_link.asp