What does degradation do exactly?

I´m getting it so far but I have some doubts about why I need to add the comments tags <!–> Could someone explain me this?
And I would like to clarify what degradation do: If I put: “monospace, Lobster;” for example, it means that if the monospace font isn´t avalible my paragraphs will be shown with the lobster font?
Thanks


<!--<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> -->
<style>
.red-text {
  color: red;
}

h2 {
  font-family: lobster, monospace;
} 
p {
  font-size: 16px;
  font-family: monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36.

Challenge: Specify How Fonts Should Degrade

Link to the challenge:

This challange is asking you to comment out the top line because that is what makes the lobster font available.

When you comment out this line, you should see that visually the style of the font in the h2 element switches back from lobster to monospace. This is the degradation mechanism at work - lobster wasn’t available, so your browser degrades the font in h2 to the second choice, monospace.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.