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 class="description">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="" class="description">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.
>Solution :
h1 { color: #ffffff;}
.description {
font-style: italic;
color: green;
}
Hope this help. Thanks!