If you delete the sentence fragment at the beginning, “descendants of “header__nav”.”, does the rest of the sentence make sense? The sentence fragment is accurate but it is part of the previous sentence, not part of this sentence, and I did not explain what it meant, so if English is not your native language, you might find it confusing. I should have been clearer.
Think of family relationships. A parent has a child. The child is a descendant of the parent. The child has a child. The child of the child would be a descendant of its parent and would also be a descendant of its grandparent. And so on.
Then consider that all of the parents and their children outside of this family line are unrelated to this family. This analogy is a useful way to describe how CSS can target elements that are children (descendants) of a particular parent element without targeting (addressing) similar elements that are outside of the parent element’s family of children.
I cannot recommend strongly enough, it seems, that you should abandon Russ Weakly’s tutorial until after you have learned CSS. His tutorial was written with the expectation that the reader would be versed in HTML and CSS. It was not written to teach CSS. If after learning how CSS styles HTML, you then want to pursue Russ’ methodology for coding a web site, they by all means to for it. However, without that basic understanding of CSS, you will encounter more confusing steps because you are missing vital information about how CSS behaves.
Here is something else for you to look at that is indirectly related to your tutorial:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>css selectors</title>
<!--
https://www.sitepoint.com/community/t/nav-links-is-not-visible/243015
koku300
All of these CSS selectors address an h2 element, but they apply different styles to specific h2's.
Specificity plays an important role here. Read about CSS specificity.
-->
<style type="text/css">
h2 {
color:#666;
font-weight:bold;
font-style:italic;
font-size:1.5em;
font-family:"Palatino Linotype", serif, cursive;
text-decoration:underline;
}
header h2 {
color:green;
text-decoration:none;
}
.chapter1 h2 {
background-color:pink;
}
.chapter2 h2 {
background-color:#eee;
}
.chapter3 h2 {
background-color:yellow;
}
</style>
</head>
<body>
<header>
<h1>Page Title</h1>
<img src="http://placehold.it/500x100/" width="500" height="100" alt="">
<h2>This is an <h2> in the header section. It is not in the main sections.</h2>
</header>
<main>
<section class="chapter1">
<h2>Title of Chapter 1</h2>
<p>...</p>
</section>
<section class="chapter2">
<h2>Title of Chapter 2</h2>
<p>...</p>
</section>
<section class="chapter3">
<h2>Title of Chapter 3</h2>
<p>...</p>
</section>
</main>
<footer>...</footer>
</body>
</html>
Simple code, simple CSS. Do you understand how it works? If not, please do yourself and us a favor by learning CSS before diving into deeper waters.