HTML CSS Font Degradation

HTML-CSS
1

Tell us what’s happening:
Can someone tell me what I’m doing wrong here? The tasks say " Your h2 element should degrade to the font monospace when Lobster is not available." I can’t seem to get it work. Any pointers?

Your code so far


<!--<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"-->
<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="/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 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36.

Challenge: Specify How Fonts Should Degrade

Link to the challenge:

2

Take a closer look at the example and compare it with your code, there’s a difference.

3

Welcome jessie.

To pass the tests, @sanity is correct, you need to take a closer look at the example in the lesson.

To expand on the reasoning: When the compiler runs through your scripted code, it looks for very specific features of your code to know what to run, and when. These features make up the syntax of a language. For CSS, one of them is the semi-colon ;

The semi-colon is used by the compiler to know when the end of a line is. More specifically, the end of an expression. It will not interpret anything after a ; as part of your current expression.

Hope this helps

2 Likes