Angular don't apply styles-CodePudding

There is project source code.

app.component.css

h1: { color: #ffffff;}

.description: {
    font-style: italic;
    color: green; 
}

app.component.html

<h1>My app</h1>
<p >My description</p>

app.component.ts

import { Component } from "@angular/core"

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
}

This is a component project structure.

  ▾ src/
    ▾ app/
      app.component.css
      app.component.html
      app.component.ts
      app.module.ts

This is how code was rendered and presented in a browser.

<html lang="en"><head>
  <meta charset="utf-8">
  <title>Learnangular5</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
<style>
        h1[_ngcontent-rjo-c11]: { color: #ffffff;}

        .description[_ngcontent-rjo-c11]: {
            font-style: italic;
            color: green; 
        }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtRQUNRLE1BQU0sY0FBYyxDQUFDOztRQUVyQjtZQUNJLGtCQUFrQjtZQUNsQixZQUFZO1FBQ2hCIiwiZmlsZSI6ImFwcC5jb21wb25lbnQudHMiLCJzb3VyY2VzQ29udGVudCI6WyJcbiAgICAgICAgaDE6IHsgY29sb3I6ICNmZmZmZmY7fVxuXG4gICAgICAgIC5kZXNjcmlwdGlvbjoge1xuICAgICAgICAgICAgZm9udC1zdHlsZTogaXRhbGljO1xuICAgICAgICAgICAgY29sb3I6IGdyZWVuOyBcbiAgICAgICAgfVxuICAgICJdfQ== */</style></head>
<body data-new-gr-c-s-check-loaded="14.1071.0" data-gr-ext-installed="">
  <app-root _nghost-rjo-c11="" ng-version="14.1.0">
     <h1 _ngcontent-rjo-c11="">My app</h1>
     <p _ngcontent-rjo-c11="" >My description</p></app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" defer=""></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script>

</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>

Looks like I did everything correctly, all file names are correct, style names correct, correctly rendered, and all it rendered code all namings are correct, but no styles were applied. I tried to use the styles Component property, but it had no result.

CodePudding user response：

h1 { color: #ffffff;}

.description {
    font-style: italic;
    color: green; 
}

Hope this help. Thanks!