Challenge: Porridge Recipe in CSS [16/16]

In the last challenge of the "How to Mark up Text with HTML" course, you have marked up the porridge recipe using relevant tags.

In this challenge, the recipe is the same. However, your task is different. The original HTML code is completely ready and locked. Now, apply the CSS properties you have learned in this course to the applicable <span> elements.

Do it
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Millet Porridge with Pumpkin</title> </head> <body> <h1>Millet Porridge with Pumpkin</h1> <ol> <li>Millet, 1 cup</li> <li>Water H<span class="sub">2</span>O or AquaLife<span class="sup">®</span>, 2 cups</li> <li>Milk, <span class="del">1.5 cups</span> 2 cups</li> <li>Butter, 3 tablespoons</li> <li>Pumpkin, about 300g</li> <li>Salt to taste</li> <li><span class="underline">Demerara sugar, sprinkle on top</span></li> </ol> <hr> <span class="italic">Notes:</span><br> Sort out the millet<br> Cut the pumpkin into 1cm cubes<br> Don&apos;t stir the porridge<br> </body> </html>
body { width: 260px; margin: 0; padding: 0 10px; font-family: "Times New Roman", serif; font-size: 16px; } h1 { font-size: 18px; }
<HTML Academy>