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
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>
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">
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
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
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
I’ve completed this level already so I can help if you are still confused.