CSS properties not working properly in angular-CodePudding

some of my css styles like body background-image and align are not working properly with angular although they are working perfectly when running the html file with same styles but I can't understand why

Here is my code:

* {
  margin: 0
}

body {
  background-image: linear-gradient(180deg, 
                                  rgba(125, 70, 184, 1) 0%,  
                                  rgba(100, 106, 195, 1) 35%,  
                                  rgba(55, 182, 216, 1) 100%);
}

table,
td {
  color: white;
}

.regContainer {
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  width: 50%;
  padding-top: 20px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 80%;
}

.regContainer h1 {
  color: white;
  background-color: rgb(38, 33, 87);
  font-family: sans-serif;
  text-align: left;
  margin-top: 50px;
  padding-top: 10px;
  padding-left: 15px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.regContainer p {
  color: white;
  background-color: rgb(38, 33, 87);
  font-family: sans-serif;
  margin: 0px;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
}

.registartion-form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  font-size: 18px;
  font-family: sans-serif;
  color: rgb(255, 255, 255);
  background-color: rgba(44, 43, 105);
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.registartion-form input,
.registartion-form select,
.registartion-form textarea {
  border: none;
  border-radius: 5px;
  padding: 5px;
  margin-top: 10px;
  font-family: sans-serif;
}

.registartion-form input:focus,
.registartion-form textarea:focus {
  box-shadow: 3px 3px 10px rgb(228, 228, 228), -3px -3px 10px rgb(224, 224, 224);
}

.registartion-form .submit {
  width: 100%;
  padding: 8px 0;
  font-size: 20px;
  color: rgb(255, 255, 255);
  background-color: rgb(96, 177, 45);
  border-radius: 5px;
}

.registartion-form .submit:hover {
  box-shadow: 0px 3px 6px rgb(255, 255, 255);
}

<head>
    <link rel="stylesheet" href="regCSS.css" type="text/css">
</head>

<div >
    <div >
    <h1>Register</h1>
    <p>Please fill in this form to create an account.</p>
  </div>
    <form name="registration"  onsubmit="return formValidation()">
      <table>
        <tr>
          <td><label for="name">Name:</label></td>
          <td><input type="text" name="name" id="name" placeholder="your name"></td>
        </tr>
        <tr>
          <td><label for="email">Email:</label></td>
          <td><input type="text" name="email" id="email" placeholder="your email"></td>
        </tr>
        <tr>
          <td><label for="password">Password:</label></td>
          <td><input type="password" name="password" id="password"></td>
        </tr>
        <tr>
          <td><label for="phoneNumber">Phone Number:</label></td>
          <td><input type="tel" name="phoneNumber" id="phoneNumber"></td>
        </tr>
        <tr>
          <td><label for="gender">Gender:</label></td>
          <td>Male: <input type="radio" name="gender" value="male">
            Female: <input type="radio" name="gender" value="female"></td>
        </tr>
        <tr>
          <td><label for="language">language</label></td>
          <td>
            <select name="language" id="language">
              <option value="">Select language</option>
              <option value="English">English</option>
              <option value="Spanish">Spanish</option>
              <option value="Hindi">Hindi</option>
              <option value="Arabic">Arabic</option>
              <option value="Russian">Russian</option>
            </select>
          </td>
        </tr>
        <tr>
          <td><label for="zipcode">Zip Code:</label></td>
          <td><input type="number" name="zipcode" id="zipcode"></td>
        </tr>
        <tr>
          <td><label for="about">About:</label></td>
          <td><textarea name="about" id="about" placeholder="Write about yourself..."></textarea></td>
        </tr>
        <tr>
          <td colspan="2"><input type="submit"  value="Register" /></td>
        </tr>
      </table>
    </form>
  </div>

<body>
    <script type="text/javascript" src="regJS.js"></script>
</body>

most of it is working properly except for that I can't see the background gradient and the form is not centered on angular

how it should be:

how it is on angular:

CodePudding user response：

There are some css selectors that, by default, cannot be targeted by a component.

So you have two ways:

Target those selector in the style.scss file.

Selectors such as body, html, *, etc (even the material ones or any library's style) by default cannot be targeted by the component's scope, so if you move them in your root css file (usually style.scss) you will see the properties applied.

Change the component's encapsulation.

If you want to change those selectors from the component's scope itself you can achieve that using ViewEncapsulation.None.

@Component({
  selector: 'your-selector',
  templateUrl: './foo.html',
  styleUrls: ['./foo.scss'],
  encapsulation: ViewEncapsulation.None
})

Using ViewEncapsulation.None means that the styles are applicable to any HTML element of the application regardless of their host Component.

Be aware that using no encapsulation can lead to some unwanted scenarios. More details here