/* CSS */
em {
  font-style: normal;
  text-decoration: underline;
}

<!-- HTML -->
<p>This text has <em>emphasis!</em></p>

<!-- Don't do this -->
<h2>I want this text to be big</h2>

<!-- Do this -->
<p>I want this text to be big</p>

/* use CSS to make things bigger or bolder */
p {
  font-size: 1.75em;
  font-weight: bold;
}

<!-- Don't do this -->
<button>Click here to view info!</button>

<!-- Do this -->
<a href="info.html">Click here to view info!</a>

/* use CSS to make links look like buttons if desired */
a {
  font-weight: 400;
  text-align: center;
  color: #fff;
  background-color: #007bff;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
}

<!-- Don't do this -->
<i>I am italic!</i>
<b>I am bold!</b>

<!-- Do this (examples) -->
<em>I am italic (because I'm important)</em>
<strong>I am bold (because I'm really important)</strong>
<cite>I am italic because I'm a book title</cite>

<!-- Do this -->
<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
  Consectetur est necessitatibus, rerum atque officiis doloremque porro similique molestias fugit, a repellendus fuga natus, tempora impedit.
</p>

<!-- Don't do this -->
<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  <br />
  Consectetur est necessitatibus, rerum atque officiis doloremque porro similique molestias fugit, a repellendus fuga natus, tempora impedit.
<p>

<!-- Do this -->
<!-- This *single line of code* can be made to wrap in your editor -->
<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur est necessitatibus, rerum atque officiis doloremque porro similique molestias fugit, a repellendus fuga natus, tempora impedit. Dolore repellendus itaque soluta est ad modi corrupti quibusdam tenetur architecto nesciunt harum ipsa consectetur ullam unde, quos sit asperiores corporis vitae pariatur expedita non?
</p>

<!-- Don't do this -->
<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  Consectetur est necessitatibus, rerum atque officiis doloremque
  porro similique molestias fugit, a repellendus fuga natus,
  tempora impedit. Dolore repellendus itaque soluta est ad modi
  corrupti quibusdam tenetur architecto nesciunt harum ipsa
  consectetur ullam unde, quos sit asperiores corporis vitae
  pariatur expedita non?
</p>

<!-- these three paragraphs will all have the same 
     "parent" which can be styled on its own -->
<div>
  <p>Lorem ipsum dolor</p>
  <p>sit amet consectetur</p>
  <p>Adipisicing elit</p>
</div>

<!-- these paragraphs are in a different "group" -->
<div>
  <p>Lorem ipsum dolor</p>
  <p>sit amet consectetur</p>
</div>

<!-- A collection of "cards" on a page -->
<div class="card-group">
  <div class="card">
    <div class="card-header">Featured</div>
    <div class="card-body">
      <h2>Card 1</h2>
      <p>An information card</p>
    </div>
  </div>
  
  <div class="card">
    <div class="card-body">
      <h2>Card 2</h2>
      <p>Another information card</p>
    </div>
  </div>
</div>

<div class="cow">
  <p>Moo moo moo.</p>
  <p>Moooooooooooooooooooo.</p>
</div>

<div class="sheep">
  <p>Baa baa <span class="dark">black</span> sheep,
     have you any wool?</p>
</div>

<h1>My Hobbies</h1>
<p>These all are activities I love to do on a regular basis.</p>

  <h2>Physical Activities</h2>

    <h3>Playing Soccer</h3>
    <p>Soccer is a team sport played between two teams of eleven players with a spherical ball.</p>

    <h3>Dancing</h3>
    <p>Dance is a performing art form consisting of purposefully selected sequences of human movement.</p>

      <h4>Salsa</h4>
      <p>Salsa is a popular form of social dance that originated in the Caribbean.</p>
     
      <h4>Rock'n'Roll</h4>
      <p>Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop.</p>

    <h3>Gardening</h3>
    <p>Gardening is the practice of growing and cultivating plants as part of horticulture.</p>

  <h2>Relaxing Activities</h2>

    <h3>Watching Movies</h3>
    <p>A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.</p>

    <h3>Meditate</h3>
    <p>Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself.</p>