Solution: Change Fonts

I gave you an assignment in the last video to change the fonts in Header and NavBar.

One way we could do this is to add a style to header.css:

h1 {
  font-family: Verdana, Helvetica, sans-serif;
}

Of course, because this change is global, all h1 tags will be affected by this. This could be avoided by naming and using a specific class.

To style the links in the NavBar, we can add a class to styles.css:

.nav-link {
   font-family: Verdana, Helvetica, sans-serif;
    font-size: 1.2rem;
    padding: 0.8rem;
    text-decoration: none;
}

We can then add className="nav-link" to the links in NavBar.js.

So, this works, but it's a little obnoxious having to add global styles for our components. There could be naming conflicts and maintaining this application could become difficult quickly. It'd be nice if we could limit the use of a class to a component. Luckily, that's what we'll start learning in the next video.