How to change css html { } attribute for a single page-CodePudding

First time posting here. I was wondering how to change the css for the html { } attribute of a single page. I am trying to make the background color for 2 pages different. If there is a better way to do it please let me know. Thanks!

I have done this:

html {
  background-color: black;
}

for one page.

I want to do the same thing with a different color for another page (so that when you scroll out of bounds of the div it does not show a different color).

CodePudding user response：

Every page must to take a different css external document:

<link rel="stylesheet" href="css/page1.css">

Then, you can change the element's properties:

/* 1st page */
body{
  background-color: black;
  /* background: rgb(0,0,0); **You can also use this property** */
}

/* 2nd page 
body{
  background-color: blue;
}
*/

Saludos!

CodePudding user response：

This is one solution to your code. If you do not want the white part between two pages, just using position:absolute; in CSS.
Furthermore, your CSS code is not working because you forgot a "."

.page1{
  height:100%;
  background:red;
}
.page2{
  height:100%;
  background:green;
}

<body>
  <div >
    <p>
      Your elements
    </p>
  </div>
  <div >
    <p>
      Your elements
    </p>
  </div>
</body>