Unexpected CSS Behavior in Replit IDE

Problem description

When attempting to apply CSS styles to specific elements, such as a <div>, within an HTML file in Replit IDE, the styles are being applied to the entire body of the document instead of the intended element. This behavior is not consistent with other IDEs like Glitch and VS Code, where the same code works as expected.
Here’s the code:


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
       background-color: blue;

  <h1>Hello world</h1>
    This is the element that i want to colour



Expected behavior

Only the <div> element should have a blue background, as specified in the CSS.

Actual behavior

The entire body of the HTML document is colored blue instead of just the <div> element.

Steps to reproduce

  1. Create an HTML file in Replit IDE.
  2. Add a <div> element with some content inside it.
  3. Apply CSS styles to the <div> element using standard CSS syntax, such as background-color: blue;.
  4. Run the HTML file in the preview mode within Replit IDE.


Chrome, app



Device if mobile



Free tier

Please upload screenshots

1 Like

Your post was formatted wrong, I’ve fixed it here:


Thank you very much. I’m new, that’s why I used the wrong formatting. Please let me know if you have an answer to my question as well. Have a great day!

@Shinphony Can you open it in a New tab?


:o it worked, thanx a lot @SuzyAtReplit !!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.