Reputation: 1
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–26th — 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
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