Loading...

Now that you can use inline CSS styles, use the activity below to practice applying style changes to text elements.

Work your way through the tasks below to practice coding what you've learned in this lesson. If you have trouble with any of these tasks, be sure to review that section of the lesson before moving on to your quiz.

Copy the following code into the text editor and complete the prompt:

  • Set the span text's font to be Times New Roman with a backup font category of serif.

<p>Tincidunt praesent semper feugiat nibh.</p> 

Tincidunt praesent semper feugiat nibh.

Copy the following code into the text editor and complete the prompts:

  • Set the following paragraph's font size to 20px.
  • Set the span tag to twice the parent p-tag font size, using an em value.

<p>Sit amet tellus cras adipiscing enim. 
<span>Pellentesque diam volutpat</span> commodo 
sed egestas egestas fringilla.</p>

Sit amet tellus cras adipiscing enim. Pellentesque diam volutpat commodo sed egestas egestas fringilla.

Create a paragraph tag with the following text and align it to the center.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Copy the following code into the text editor and complete the prompts:

  • Set the first table cell's content to align to the top.
  • Set the second table cell to align to the middle.
  • Set the third table cell to align to the bottom.

<style>
  table, tr, td {
    border: 1px solid black;
  }
</style>

<table>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur 
      adipiscing elit, sed do eiusmod tempor incididunt ut 
      labore et dolore magna aliqua.</td>
      <td>Eiusmod tempor incididunt ut labore et 
      dolore magna aliqua.</td>
      <td>Lorem ipsum dolor sit amet, consectetur 
      adipiscing elit.</td>
    </tr>
  </tbody>
</table>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Create a paragraph tag with the following text and align it to the center.

  • Set the first span-tag to bold.
  • Set the second span-tag to italic.
  • Set the third span-tag to underline.

<p>Quis <span>commodo odio</span> 
aenean <span>sed adipiscing</span> diam donec 
<span>adipiscing</span> tristique.</p>

Quis commodo odio aenean sed adipiscing diam donec adipiscing tristique.