After reading this chapter, if you only remember one thing, then let it be that inline styles are bad. Period. Avoid using them whenever possible. Why? That's because not only will they make your website impossible to maintain as the website grows, they also take up precious bytes as they force you to repeat the same rules over and over. Consider the following markup for our Gallery section:

   <div class="carousel-inner" role="listbox">
    <div style="height: 400px" class="carousel-item active">
      <img class="d-block img-fluid" src="images/brazil.png" 
      data-modal-picture="#carousel-modal">
      <div class="carousel-caption">
        Brazil
      </div>
    </div>
    <div style="height: 400px" class="carousel-item">
      <img class="d-block img-fluid" src="images/datsun.png" 
      data-modal-picture="#carousel-modal">
      <div class="carousel-caption">
        Datsun 260Z
      </div>
    </div>
    <div style="height: 400px" class="carousel-item">
      <img class="d-block img-fluid" src="images/skydive.png" 
      data-modal-picture="#carousel-modal">
      <div class="carousel-caption">
        Skydive
      </div>
    </div>
   </div>

Note how the rule for defining a gallery item's height, style="height: 400px", is repeated three times, once for each of the three gallery items. That's an additional 21 characters (or 21 bytes, assuming that our document is UTF-8) for each additional image. Multiplying 3*21 gives us 63 bytes, and 21 more bytes for every new image that you want to add to the Gallery. Not to mention that if you ever want to update the height of the gallery images, you will need to manually update the style attribute for every single image. The solution is, of course, to replace the inline styles with an appropriate class. Let's go ahead and define an img class that can be applied to any carousel image:

    .carousel-item { 
        height: 400px; 
    } 

Now let's go ahead and remove the style rules:

    <div class="carousel-inner" role="listbox">
      <div style="height: 400px" class="carousel-item active">
        <img class="d-block img-fluid" src="images/brazil.png" 
        data-modal-picture="#carousel-modal">
        <div class="carousel-caption">
          Brazil
        </div>
      </div>
      <div style="height: 400px" class="carousel-item">
        <img class="d-block img-fluid" src="images/datsun.png" 
        data-modal-picture="#carousel-modal">
        <div class="carousel-caption">
          Datsun 260Z
        </div>
      </div>
      <div style="height: 400px" class="carousel-item">
        <img class="d-block img-fluid" src="images/skydive.png" 
        data-modal-picture="#carousel-modal">
        <div class="carousel-caption">
          Skydive
        </div>
      </div>
    </div>

That's great! Not only is our CSS now easier to maintain, but we also shaved 29 bytes off our website (the original inline styles required 63 bytes; our new class definition, however, requires only 34 bytes). Yes, this does not seem like much, especially in the world of high-speed broadband, but remember that your website will grow and every byte adds up.

There are several more inline styles spread around our HTML document. Go ahead and fix them before moving on to the next section.