Set the font-size for Multiple Heading Elements

Tell us what’s happening:
actually the challenge is to set the font sizes using css tags but as it can be seen that i changed the font size of h6 element to 14px but still in the console it shows error.
pls help to fix this.
regards

Your code so far


<style>
h6 {
 font-size:14px;
}
h5 {
  font-size:21px;
}
h4 {
  font-size:32px;
}
h3 {
  font-size:40px;
}
h2 {
  font-size:52px;
}
h1 {
  font-size:68px;
}

</style>
<h1>This is h1 text</h1>
<h2>This is h2 text</h2>
<h3>This is h3 text</h3>
<h4>This is h4 text</h4>
<h5>This is h5 text</h5>
<h6>This is h6 text</h6>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements

That’s strange. I copied and pasted your code into the problem and, using all three major browsers, it worked fine. Do you see anything in your browser console?

2 Likes

I tried it too, and it works fine with me. Can’t detect any problem there.

Are you by any chance using either Edge or Safari? These browsers don’t adhere to web standards for some of the newer JavaScript and CSS that FCC uses. As a result they cause failures that are difficult to predict. They seem to be especially bad at running tests in the early sections of FCC. I strongly recommend using Chrome or Firefox.

nope i am using google chrome

the browser console also shows the changed font size of 14px

I am having the exact problem. No way to figure out what is the solution to it.
I tried using CSS selectors, classes, id, tags, inline CSS - none of them seem to solve the problem.

I used in-line style and it worked. ex. style=“font-size:52px”

Also, your h1-h6 may be in reverse order. Not sure if that’s a problem, but it could confuse the browser.

I agree… typically in this case the code is read top to bottom…