Why does the app.component.css file not work in Angular?

Question

When we execute in Angular the command ng g c page --spec=false it creates a component composed of four files, an HTML file, a module file, a CSS file and a file TS as shown in the figure below, in my case below I did not need to execute the command because it came natively from Framworks;

The CSS file does not work although I will be interconnected as shown in the code below;

import { Component } from '@angular/core';

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

These are the settings I put in my css file that is named after app.component.css

body{
    background: #098778;
}

Please, this CSS file is only in the embellishment project or is it because I am doing something wrong?

If I’m doing something wrong What should I do to make it work?

I already know that there is a default file at the root of the project with the css style., it serves as the project’s global configuration, what I need is that file app.component.css work!

Answer 1

The css app is specific to the Component app, the body is above it in the gift so it won’t work. To change the overall style you have to change the style.css file

what you can try in app.css and something like that:

:host{
    width:100vw;
    hight:100vh;
    background: blue;
}