kayen_p
kayen_p

Reputation: 1

Why are h3 & h5 not changing color even though other headings are?

So I'm following Shay Howe's Learn HTML & CSS course and in one of the lessons he has us style the anchors and notes that the h3 & h5 elements will have an issue with showing up with the correct colors, then gives us a fix by adding classes and targeting those specific element classes. My main problem is I want to know why this needs a specific fix, since reading through the CSS I can't understand why the colors wouldn't be applying properly. Here's the relevant code:

/*
  ========================================
  Typography
  ========================================
*/

h1,
h3,
h4,
h5,
p {
  margin-bottom: 22px;
}

h1,
h2,
h3,
h4 {
  color: #648880;
}

h1 {
  font-size: 36px;
  line-height: 44px;
}

h2 {
  font-size: 24px;
  line-height: 44px;
}

h3 {
  font-size: 21px;
}

h4 {
  font-size: 18px;
}

h5 {
  color: #a9b2b9;
  font-size: 14px;
  font-weight: 400;
}

strong {
  font-weight: 400;
}

cite,
em {
  font-style: italic;
}


/*
  ========================================
  Links
  ========================================
*/

a:hover {
  color: #a9b2b9;
}

a {
  color: #648880;
}
<header class="container group">

  <h1 class="logo">
    <a href="index.html">Styles <br> Conference</a>
  </h1>

  <h3 class="tagline">August 24&ndash;26th &mdash; Chicago, IL</h3>

  <nav class="primary-nav">
    <a href="index.html">Home</a>
    <a href="speakers.html">Speakers</a>
    <a href="schedule.html">Schedule</a>
    <a href="venue.html">Venue</a>
    <a href="register.html">Register</a>
  </nav>

</header>

<section class="col-1-3">
  <a href="speakers.html">
    <h5>Speakers</h5>
    <h3>World-Class Speakers</h3>
  </a>
  <p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
</section>
<!--

      Schedule

      -->
<section class="col-1-3">
  <a href="schedule.html">
    <h5>Schedule</h5>
    <h3>Three Inspiring Days</h3>
  </a>
  <p>Enjoy three inspiring and action-packed days of talks, gatherings, and all-around good times.</p>
</section>
<!--

      Venue

      -->
<section class="col-1-3">
  <a href="venue.html">
    <h5>Venue</h5>
    <h3>The Chicago Theatre</h3>
  </a>
  <p>Within the heart of downtown Chicago, The Chicago Theatre will provide a beautiful conference venue.</p>
</section>
</section>

I've reviewed the css, but am at a loss of why the anchors wouldn't have the most recent color value applied. Specific weights are the same and the anchor color is the most recent specified color value. I understand that the h1 wraps the anchor tags (and the outcome is as expected), whereas the anchor tags wrapping the h3 & h5 tags seem to not be responding properly, but I don't know why that would affect it.

Upvotes: 0

Views: 178

Answers (1)

Quentin
Quentin

Reputation: 943563

You said that h3 elements should be #648880 and h5 elements should be #a9b2b9, so they are.

You didn't say they should inherit their colour from their parent element, so the colour the a element is is irrelevant.

Upvotes: 1

Related Questions