Parts Of HTML / CSS Code not showing up on page-CodePudding

I'm trying to create a second background/box but it isn't showing up on my page. The specific code:

The MAIN-PAGE Class HTML and CSS

 <div ></div>



.MAIN-PAGE {
  position: fixed;
  height: 100px;
  width: 100px;
  color: red;

}

CodePudding user response：

You need to append the prefix "background-" to your property color. Full Example:

.MAIN-PAGE {
  position: fixed;
  height: 100px;
  width: 100px;
  background-color: red;
}

<!DOCTYPE html>
<html>
<body>
  <div ></div>
</body>
</html>

CodePudding user response：

You should use the color style for the color of the text inside the container and the background-color style for the background color.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Test</title>
    
    <style>
    .MAIN-PAGE {
      position: fixed;
      height: 100px;
      width: 100px;
    
    /* text color */
      color: red;
    
    /* background color */
      background-color: black;
    }
    </style>
</head>

<body> 
<div >test</div>
</body>
</html>

CodePudding user response：

Its working but your looking for "background-color: red;"