FAQ: Javascript and the DOM - Style an element

This community-built FAQ covers the “Style an element” exercise from the lesson “Javascript and the DOM”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Style an element

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

The interface says that I successfully completed the exercise, but the background color did not change. The only way for me to make it change is to comment out the relevant CSS. There are other Codeacademy exercises that have a similar result - CSS wins out over JS. I have tried this on both Safari and Chrome running on MacOS. This is my code:

let bodyColor = document.querySelector('body');
bodyColor.style.backgroundColor = '#201F2E';

What am I doing wrong?

Nothing, as such, but we should review the CSS before drawing any conclusions. Examine the selector rule for body in the style sheet. Notice that it is using the background property, and not background-color? There is the problem.

Our JS should be targeting that property, rather than backgroundColor, or we should change the CSS to use, background-color instead of background. Either way, we fix the problem (but also lose the gradient).


Ah tricky. I will keep an eye out for this. Thanks!

1 Like

so is this a mistake made by codeCademy? because I got the same problem

1 Like

either way great learning experience thanks to this forum


Same here. I think it’d make great sense to change the exercise to reflect that.
About background vs. background-color:
The background-color property doesn’t allow for gradients?

gradiants are properties of background. background-color can only take color palette values.


I have a question. Was this intentional? Because it is EXTREMELY confusing. This is the text from the question:

Style the background-color of the body in the blog-post document to match the color of the Codecademy text editor, '#201F2E' by using the .style property.

Looking at the CSS style sheet shows that ‘background’ is what should be changed if you actually want to change the color in the editor. But the question specifically states to style the ‘background-color’. But doing that in main.js does nothing to the blogpost. But the test passes? That is crazy confusing.

Which means, either the test passes and nothing changes or you change the color, but the test does not pass.

Or am I missing something?

background and background-color are not the same property. The latter is more specific and will override the former, if one is not mistaken. We can test this by writing both properties in the same rule, one after the other and see which one has the ability to override the other.

background: #808080;    /* gray */
background-color: #008080;    /* teal */

What color is the background? Now reverse them and see which color appears.

background-color: #008080;    /* teal */
background: #808080;    /* gray */

Is the background gray or teal?

It may be my hypothesis is wrong. In the JavaScript console we can toggle the color…

document.querySelector('body').style.background = '#808080'

gives us gray,

document.querySelector('body').style.backgroundColor = '#008080'

gives us teal. It goes back to gray when we repeat the first statement, and back to teal on the second. What happens in the actual script, though?

I agree, you are correct on the background and background-color are different.

The problem I pointed out was that the question/instruction were to “Style the background-color”. But doing that changes nothing, but the test passes as if something was done correctly. It is insanely confusing.

Here is the question:

Style the background-color of the body in the blog-post document to match the color of the Codecademy text editor, '#201F2E' by using the .style property.

The part that confuses me is, why does the test pass? Meaning, the little green check box says I did something right. But looking at the blog post nothing changes. I have to actually change ‘background’ to get the color to change to what is in the instructions.

Go to the course and follow the steps as outlined. You will see what I am talking about.

I see what you’re saying. If we set the background, nothing happens, but if we set the background-color, the change takes effect and we can see the gradient effect.

Be sure to use the JS camelCase property name. Hyphenated names don’t work in JS.


We’ll see if we can’t get someone to look in on this lesson. Might be there is nothing they can do to change it, aside from the proviso I just gave you, above.

Unclear instructions reported.

1 Like

It’s actually the opposite. The instructions tell us to change the background-color (i.e. to use backgroundColor in our code). When done “successfully,” no visible change happens because the tag is actually pulling its background from the background property, not background-color.

The Codecademy instructions should be instructing us to change background, as that would make the exercise’s success visible when we run it in the test browser.

I understood this because I know much more about HTML/CSS than I do about JS, but if this can be flagged for the future, it would make this exercise much easier to understand intuitively.

1 Like

document.getElementsByClassName(‘heading’).style.fontFamily = ‘Roboto’;
i don’t know what’s wrong with this, i can’t pass it…

1 Like

document.getElementsByClassName(‘heading’)[0].style.fontFamily = ‘Roboto’;
i change the code to this, it passed, so although the class heading is the only one, i should still treat it as array, i think.

That worked for me but should work without the ‘[0]’ too. And the hint says: “You can use the .querySelector() method to select the first element with the class name 'heading' . Then make sure to attach the .fontFamily property to .style .”
That didnt work for me either with: document.querySelector(‘heading’).style.fontFamily = ‘Roboto’;

I put too document.getElementsByClassName('heading').style.fontFamily = 'Roboto';

Logically, shouldn’t this be accepted as solution?

As long as every object in front of the property is in order, yeah. But, it is folly to attempt such a degree of granularity. At least make it readable.

const heading = document.querySelectorAll('.heading')

Now we have the headings all cached in one collection. It’s a simple matter to be perform a style action now, or at any time in the future.

heading.style.fontFamily = "Roboto"

Yes, it should be. But should it be acceptable practice to be so specific? As shown, we can gain by separating the object from the action.