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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Max van den Berge](https://secure.gravatar.com/avatar/51d9918b3547fc8125a6b8043e3c95fc?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Max van den Berge
6,506 PointsHello 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()); }
2 Answers
![A R](https://uploads.teamtreehouse.com/production/profile-photos/10838162/micro_derailment1.jpg)
A R
12,834 PointsHi 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](https://secure.gravatar.com/avatar/51d9918b3547fc8125a6b8043e3c95fc?s=60&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Max van den Berge
6,506 PointsThank you A R for your outstanding answer!!
![A R](https://uploads.teamtreehouse.com/production/profile-photos/10838162/micro_derailment1.jpg)
A R
12,834 PointsThanks Max! Glad it helped :)
realedwardleung
7,197 Pointsrealedwardleung
7,197 PointsIt'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.