<hr> considered harmful.

90% of the time you use a <hr> you are putting a divider between sections or subsections that are already (or should already) be divided by <h2>'s or <h3>'s. Instead use <div>'s to break up sections and subsections. So

<!--document.html-->
<h2>Welcome</h2>
<p>Paragraph</p>
<hr />

<h2>Blog</h2>
<p>Paragraph</p>
<hr />

becomes

<!--document.html-->
<div class="section">
  <h2>Welcome</h2>
  <p>Paragraph</p>
</div>

<div class="section">
  <h2>Blog</h2>
  <p>Paragraph</p>
</div>

The following css will produce a <hr> style border:

/* style.css */
div.section {
  border-bottom:
  solid 3px #000000 ;
}

At this point you can have more fun with the css, without touching the html any more. (Isn't that the point?) Try putting each <div class="section"> in its own little colorful box.