Set the Font Family of an Element barrier

HTML-CSS
#1

Tell us what’s happening:

So, I need to ‘Make all of your p elements use the Monospace font.’… I have tried multiple ways to make it fit… but it is very challenging… it is doing my head…

I am usually stopping to take a break and nap… after 4hrs I will wake up basically with an answer in mind OR with the full commitment not to leave my chair UNTIL…

Can it be a quicker way to solve ‘this puzzle’.

I hear louQuincyLarson saying you can always get help from the chat box. But I don’t get this option where I live (in Australia)… am I just in the wrong time zone? or wthll… am I doing wrong?

Thanks heaps!

Your code so far

<style>
  .red-text {
    color: red;
  }

  p {
    font-size: 16px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p {font-family: Monospace;} class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

<p{font-family: Monospace;}>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/set-the-font-family-of-an-element

#2

Remove the inline CSS and put this instead:

<style>
  .red-text {
    color: red;
  }

  p {
    font-size: 16px;
    font-family: Monospace; /* <-- this line */
  }
</style>

And if you want to set an inline CSS, you have to change a few things:

<p style="font-family: Monospace" class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

<p style="font-family: Monospace">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
#3

Unless the instructions say to use inline styling, you should put your CSS inside the style tags (as shown above). You need to add another property to the p element selector (shown in the above code) and assign it the value of Monospace. Your code attempted to put the selector definition inside the opening p tags which is not valid syntax. You should probably review a few previous challenges regarding where and how to put CSS code. There are no challenges were you would have been told the following is correct syntax:

<p {font-family: Monospace;} class="red-text">

The only way the above would be close to valid syntax, is if the { and } were removed and a style attribute was added such as the following example using an inline style. However, that is not what the instructions asked of you.

<p style="font-family: Monospace;" class="red-text">
#4

Thanks for your quick response…

the bad news is that I still do not get it.

I thought my English was good (enough)… but it isn’t actually my first language… so can you please write the answer as exact as I should write it, so that then I can compare what I am missing please?

I do not get how to ‘‘remove the inline and put sth else instead’’

Much appreciated,

Thanks

#5

Hi Randel

Cheers for your prompt response…

the bad news is that I still do not get it.

I thought my English was good (enough)… but it isn’t actually my first language… so can you please write the answer as exact as I should write it, so that then I can compare what I am missing please?

I do not get how to ‘‘remove the inline and put sth else instead’’

Much appreciated,

Thanks

#6

I will not give you the answer, but I will create an example of how to modify the p selector (shown below with a different property).
Starting code:

<style>
p {
  font-size: 16px;
}
</style>

Let’s say we want all the p elements to have red text color, we would add the color property to the p element selector above and assign it the value red (see below):

<style>
p {
  font-size: 16px;
  color: red;
}
</style>

You need to do something similar to this for the font-family property.

2 Likes
#7

I’ve completed this level already so I can help if you are still confused.

#8