HTML CSS font help

For some reason I cannot pass this challenge because I am failing to meet this requirement: " You should use an h2 CSS selector to change the font." I cannot identify what is wrong in my code.

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-size: 30px; font-family: lobster
}
p {
  font-size: 16px; font-family: monospace
}
</style>

<h2 class="h2">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_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Import a Google Font

Link to the challenge:

1 Like

try using

.h2 {
}

instead of:

h2 {
}

And see how it goes.

Also end styles like:

font-size: 30px; font-family: lobster;

do not forget the ;

2 Likes

@Mr-Kumar-Abhishek That would be a class selector. That is not what the challenge is asking for, it wants you to use an element selector.

@laurel2 You added a font-size rule which you were not asked to do. Remove that and remember the semicolon ; at the end of the style rule.

Also, you should remove the class you added to the h2 element as it serves no purpose (won’t make the test fail though) and I’d also suggest you always put each style rule on its own line.

1 Like

@lasjorg thanks for pointing it out, but the problem only mentions css selector which means it could either be class selector or element selector. I tested it out.

It might not be 100% obvious from the initial challenge requirement, but if you look at the tests, I think it is.

You should use an h2 CSS selector to change the font.

When it says “h2 CSS selector” it is referring to an element selector.

The fact that you can pass the challenge using a class selector is really a bug in the regex used to check for the selector (it’s an edge case not accounted for by the regex).

assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(code));

I opened an issue for it.

2 Likes

you need to create a h2 CSS selector inside the style tag. something like
“.h2 {

}”

Remember, the period before the h2 is very important. Good luck

@Obong You are not supposed to use a class selector. As I already explained the fact that you can pass the challenge using a class selector is just a bug.

If and when you are supposed to use a class selector in a challenge it will be very clear about it and will (should) include instructions for adding the class to the element as well.

You should read the instruction posted by the op bruh.

@Obong There is nothing to discuss here, the challenge is not asking that you use a class selector, period.

@laurel2 Please let us know if you still need help with the challenge.

Lol. Anything you say, Lord and master.

the challenge is not asking for a class selector, it would be terribly confusing to have class selectors with same name as elements

Also, you should remove the class you added to the h2 element as it serves no purpose