You already know enough to not just fix other people’s bugs, but also refactor (improve) the code.

Your colleague used inline styles everywhere, and this isn’t particularly good.
Let’s refactor the code using classes and identifiers.

  • Use the ‘tag-name’ class to style the<span>elements
  • Use the ‘description’ class to style the<p>elements
  • Use the id ‘page-header’ to style the<h1>element

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task


<!DOCTYPE html>
    <h1 style="color: blue">Styles we have learned</h1>
    <p style="color: saddlebrown">
      <span style="font-weight: bold">font-size: </span>
      sets the size of the font.
    <p style="color: saddlebrown">
      <span style="font-weight: bold">color: </span>
      sets the text-color for different elements.
    <p style="color: saddlebrown">
      <span style="font-weight: bold">text-align</span>
      sets the text alignment for different elements.