<div class="container">
  <p></p>
  <div class="element element-1">
    <p>My font family is 'Arial'. I don't have a wide range of font faces for my font family.</p>
    <div class="child">
      My font weight is bolder than my parent's font weight. Since my parent's font family does not have a wide range of weights, my weight looks exactly the same as my parent's.
    </div>
  </div>
  <div class="element element-2">
    <p>My font family is 'Open Sans', and my font weight is set to <code>bold</code>. My font has a wide range of font weights from 100 to 900.</p>
    <div class="child">
      My font weight is lighter than my parent's font weight.
    </div>
    <div class="child-2 child">
      My font weight is 100.
    </div>
    <div class="child-3 child">
      My font weight is bolder than my parent's.
    </div>
  </div>
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300);
body {
  background-color: #2286b9;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto 0;
  width: 90%;
}

.element {
  padding: 20px;
  background-color: white;
  color: #333;
  margin-bottom: 30px;
}

.child {
  padding: 10px 0 0 40px;
}

.element-1 {
  font-family: "Arial", sans-serif;
  font-weight: bold;
}

.element-1 .child {
  font-weight: bolder;
}

.element-2 {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}

.element-2 .child {
  font-weight: lighter;
}

.element-2 .child-2 {
  font-weight: 100;
}

.element-2 .child-3 {
  font-weight: bolder;
}