htmlcsscss-selectorscss-specificity

Why is the font-size, but not the color, property applying to elements?

I'm self-teaching myself Html/Css, kindly explain to me like a dummy(phew!)

Help clear the doubt where I tried to target my list items in an unordered list. I realized that color property couldn't be applied but font-size property as shown below applied. But when I move forward to include <a> tag after my <li> tag, color property applied. I'm looking forward to understand why rather than using trial and error. Thanks.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  height: 80px;
  background: gray;
}

.navbar .nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .nav-wrapper .logo a {
  text-decoration: none;
  font-size: 30px;
  font-weight: 700;
  color: orangered;
  margin-top: -70px;
}

.navbar .nav-wrapper .navlist ul {
  list-style: none;
}

/* FOCUS HERE */
.navbar .nav-wrapper .navlist ul li {
  display: inline-block;
  margin: 30px;
  font-size: 20px;
  color: #fff;
}
<nav class="navbar">
  <div class="nav-wrapper">
    <div class="logo">
      <a href="#">
        <h3>champ</h3>
      </a>
    </div>
    <div class="navlist">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Visit</a></li>
        <li><a href="#">Donate</a></li>
      </ul>
    </div>
    <div class="navbuttons">
      <button>Login</button>
      <button>Logout</button>
    </div>
  </div>
</nav>

I thought if font-size worked so even color should have worked.

Solution

  • The font-size property, applied to the <li>, is inherited by the <a>, and it works.

    The color property, applied to the <li>, is also inherited by the <a>, but it doesn't work. This is because the browser has a rule (from its own stylesheet) applying directly to the <a>, taking precedence over the inheritable color rule on the <li>. The browser has no rule canceling out your font-size.

    enter image description here

    The simplest solution is to apply your color rule to the <a> directly.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  height: 80px;
  background: gray;
}

.navbar .nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .nav-wrapper .logo a {
  text-decoration: none;
  font-size: 30px;
  font-weight: 700;
  color: orangered;
  margin-top: -70px;
}

.navbar .nav-wrapper .navlist ul {
  list-style: none;
}

.navbar .nav-wrapper .navlist ul li {
  display: inline-block;
  margin: 30px;
}


/* both rules moved from above */
.navbar .nav-wrapper .navlist ul li a {
  font-size: 20px;
  color: #fff;
}
    <nav class="navbar">
  <div class="nav-wrapper">
    <div class="logo">
      <a href="#">
        <h3>champ</h3>
      </a>
    </div>
    <div class="navlist">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Visit</a></li>
        <li><a href="#">Donate</a></li>
      </ul>
    </div>
    <div class="navbuttons">
      <button>Login</button>
      <button>Logout</button>
    </div>
  </div>
</nav>