refactoring-html.html

<!-- How are you organizing your CSS? -->
<style>

  /* What isn't unique between box-1 and box-2? */
  .box-1 {
    color: blue;
    float: left;
    width: 500px;
  }
  
  .box-2 {
    border: 1px solid red;
    float: left;
    width: 500px;
  }
  
  /* Can this be condensed? */
  .box-3 {
    border-color: green;
    border-style: solid;
    border-width: 3px;
  }
  
</style>

<!-- Do you NEED an extra div? -->
<section>
  <div>
    <p>Hello</p>
  </div>
</section>

<!-- Inline styling will override external stylesheets and embedded styling -->
<div class="box-2" style="border: 2px dotted blue">
  What border will I have?
</div>