Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Max van den Berge
Max van den Berge
1,850 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()); }

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,829 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
1,850 Points

Thank you A R for your outstanding answer!!

A R
A R
12,829 Points

Thanks Max! Glad it helped :)