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:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<style>
div{
background-color: blue;
}
</style>
</head>
<body>
<h1>Hello world</h1>
<div>
This is the element that i want to colour
</div>
</body>
</html>
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
Create an HTML file in Replit IDE.
Add a <div> element with some content inside it.
Apply CSS styles to the <div> element using standard CSS syntax, such as background-color: blue;.
Run the HTML file in the preview mode within Replit IDE.
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!
