Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Basics Making Decisions in Your Code with Conditional Statements Introducing Conditional Statements

Posted by Max van den Berge
Max van den Berge
6,506 Points

Hello i have aquestion . i tried to add some "css style" to the answer we get from this statement. Is this the most suff

Hello i have aquestion . i tried to add some "css style" to the answer we get from this statement. Is this the most sufficient way to do it? love to hear from you all :)

const answer= prompt("which planet is closest to the sun?"); if( answer === "Mercury" ) {
document.write ("<h1>correct</h1>"); }

else{ document.write( answer.toUpperCase().bold().italics() +' '+ " sorry, but that is incorrect".toUpperCase().bold().italics()); }

realedwardleung
realedwardleung
7,197 Points

It's better to try and put all your CSS style in another file when you're working on a project but if you wanna see/test something straight away then inline styles are fine, I don't think you should use styles with methods though.

2 Answers

A R
A R
12,834 Points
A R
A R
12,834 Points

Hi Max, good question. I found one of the things that's tough about learning online is figuring out what best practices are and what code in the real world looks like. The way you're doing it is maybe a little less standard than others. The more common way of making css changes is often:

document.getElementById('answer')
     .setAttribute("style", "text-transform: uppercase; font-weight: 600; font-style: italic;");
OR
document.getElementById('answer')
     .style.cssText = "text-transform: uppercase; font-weight: 600; font-style: italic;";

by the way, I'm assuming your answer text has an ID of 'answer'. You can also change styles one by one. You might see this a bit more often:

document.getElementById('answer').style.backgroundColor = "red";

Read more here: https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style

The one thing you should know about these methods is that they create an inline style, which shows up in your HTML, not CSS document. This means it has a higher specificity than a style that's in your CSS document and will override those styles, making it generally the most important style on the page.

More here: https://www.codecademy.com/articles/html-inline-styles

Another final would be appending a CSS class. You'd have to add the styles in the CSS document. This might be the best way if you have a big codebase and want to make the styles easy to maintain down the line. 

document.getElementById('answer').classList.add("totally-wrong");

However, it's worth adding that there is some leaning toward having CSS written alongside the elements they style in React: CSS Modules. This might be a bit much to deal with now and is totally useless for what you're working on, but this may be interesting reading later on. https://www.smashingmagazine.com/2020/05/styling-components-react/

Max van den Berge
Max van den Berge
6,506 Points

Thank you A R for your outstanding answer!!

A R
A R
12,834 Points
A R
A R
12,834 Points

Thanks Max! Glad it helped :)