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 >
      <div  id="wave1"></div>
      <div  id="wave2"></div>
      <div  id="wave3"></div>
      <div  id="wave4"></div>
    </div>
    <ul >
      <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 >
      <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 ></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.

CodePudding user response：

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;
}

CodePudding user response：

add class for your ex `

  .blacked{
      color:black;
    }

  <p> Made with&nbsp;
    <i ></i> &nbsp;by 
      <a  href="https://www.instagram.com/iallenmathew">USER</a></p>

` in your stylesheet: add this

.blacked{
  color:black;
}

  <p> Made with&nbsp;
    <i ></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