Help with font degrading

Tell us what’s happening:

  **Your code so far**

<!--<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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36.

Challenge: Specify How Fonts Should Degrade

Link to the challenge:

Welcome to the forums.

  1. Tell us what is happening.
  2. Show us your code.
  3. Tell us what you tried.

We will try to help.

Your problem is CSS syntax.

Correct syntax is:

body{
   attribute: val1, val2, va3, ..... ;
}

Your code looks different.

I have a problem when i have to run the code it says " Your h2 element should degrade to the font monospace when Lobster is not available".

I’m now so confused coz I have tried everything .I did exactly what was done in the video.

Can you please explain how is my syntax wrong because it says:

h2 {
font-family: lobster; monospace;
}

which is exactly like:
body{
attribute: val1; val2;
}

It is not exactly the same.
My example have a small, little difference.

body{
    attribute: val1, val2;
}

Thank you so much.
I see the difference now

1 Like

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