CODEWITHSUNDEEP
htmlcsscolors
St3
St3

Reputation: 401

One line of text refuses to change color

I was doing a project recreating the google homepage in HTML/CSS and for the most part it came out fine except for some reason I can't get the text inside the "Sign Up" to change color.

<div id="contents">
    <div id="navbar">
        <ul>
            <li id="signin"><a href="https://accounts...">Sign In</a></li>

I call it out in CSS with these lines.

#navbar a {
    text-decoration: none;
    width: 200px;
    color: #4c4c4c;
    font-size: 14px;
}

#signin {
    background-color: blue;
    font-weight: 800;
    color: #ffffff !important;
    padding: 7px 12px;
    }

I added !important thinking it would change but it didn't do a thing. Also to note this is just some of the code there are other items on the nav bar that are all the same correct color. I got the background-color to change but not the actual text color.

Upvotes: 0

Views: 49

Answers (1)

Troy Gizzi
Troy Gizzi

Reputation: 2520

As the other commenters were alluding to, you just need a separate CSS rule (#signin a) for the nested anchor tag.

#navbar a {
    text-decoration: none;
    width: 200px;
    color: #4c4c4c;
    font-size: 14px;
}

#signin {
    background-color: blue;
    font-weight: 800;
    color: #ffffff;
    padding: 7px 12px;
}

#signin a {
    color: #ffffff;
}
<div id="contents">
  <div id="navbar">
    <ul>
      <li id="signin"><a href="https://accounts...">Sign In</a></li>
    </ul>
  </div>
</div>

Upvotes: 3

Related Questions