Question 167455 in Html Question posted in
Some basic documentation can be found here.

Html – Text color Not showing

I want change the colors of Explore and settings text
code. Both in a tags and H4 tags. Why is that happening, Can anyone explain it with code. I am a beginner in css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twitter clone</title>
    <link rel="shortcut icon" href="asstesicotwitter.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section id="f">
        <div class="sd" >
            
       <div class="twtlog spl-item"> <a href="#" ><img src="assteslogo black.png" width="28px" height="28px"></a></div>
        
       <div class="txtlog spl_item txt"> <a href="#explore#"  >Explore</a></div>
        
        <a href="#settings#">Settings</a>
        

        
        </div>
    </section>
   
   <section id="f2" >
    <div class="headr">
        <h5 class="hdtxt">Explore</h5>
    </div>
   </section>
   <section id="f3"></section>
</body>
</html>

style.css:

#f{
    position: fixed;
    width: 26%;
    height: 100%;
    background: black;
    -webkit-text-fill-color: black;
    border-style: solid; 
    border-color: rgb(48, 48, 48);
    border-width: 2px;
}
#f2{
    margin-left: 26%;
    position: fixed;
    width: 70%;
    height: 100%;
    border-style: solid; 
    border-color: rgb(48, 48, 48);
    border-width: 2px;
    background: rgb(0, 0, 0);
}
#f3{
    margin-left: 66%;
    position: fixed;
    width: 40%;
    height: 100%;
    border-style: solid; 
    border-color: rgb(48, 48, 48);
    border-width: 2px;
    
    background: rgb(0, 0, 0);
}
body{
    margin: 0px;
}

.sd{
    display: flex;
    flex-direction: column;
    margin-top: 2%;
    margin-left: 32.6%;
    line-height: 50px;

}
.twtlog{
    display: inline-block;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  
}
.twtlog img{
    position: absolute;
    top: 4%;
    left: 35%;
    
}
.spl-item:hover{
    background-color: rgb(49, 49, 49);
}


.txtlog{
    display: inline-block;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  
}
a{
    color: aliceblue;
}
.headr{
    position:fixed ;
    width: 100%;
    height: 30px;
    background-color:transparent;
}
.hdtxt{
color-scheme: white;
}

I just need to change the color It’s showing black color text .But the text between a tags underline color is changing. Also the hover color is also not getting changed to another color.

Tags:

2

Answers


  1. 0

    Try removing this property -webkit-text-fill-color: black; from "#f",

    change this color-scheme: white; to color: white;.

    And to change the color on hover add the class "spl-item" to the a tag instead of the div. Hope this solves your problem.

    Login or Signup to reply.
  2. 0

    In order to change the color of an <a> tag you need to target it directly with css. You will need something like this

    #f a {
  color: white;
  text-decoration-color: green; // This is to change underline color
}

    and then for hover effects

    #f a:hover {
  color: black; // This will change to black when hovered but change to whatever color you want
}

    You could also set a css selector on the <a> tag itself so <a class='link'>Explore</a>

    and then do

    .link {
  color: white;
  text-decoration-color: green;
}

.link:hover {
  color: black;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search