<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700" rel="stylesheet">
  </head>

<body>
<ul class="nav">
	<li class="nav__item">Home</li>
	<li class="nav__item--bold">About</li>
	<li class="nav__item"></li>
</ul>
  
 <ul class="nav nav--danger">
	<li class="nav__item">Home</li>
	<li class="nav__item--bold">About</li>
	<li class="nav__item"></li>
</ul> 
  
 </body>
  
</html>
/* Nav is a Block*/
.nav {
  list-style: none;
}

/* A modifier for Nav Block */
.nav--danger{
  color: #eb4034;
}

/* This is an Element inside Nav*/
.nav__item {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4rem;
}

/*Modifier for the element */
.nav__item--bold{
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.