HOW TO APPLY A BACKGROUND COLOR TO AN ANGULAR COMPONENT?

Asked

Viewed 709 times

0

I intend to leave the black background of my application in angular. I inserted a "body" tag, which I don’t have at an angle, in order to apply the style (body {background-color: black}). But it gets a very large margin.

There is another way to apply a background-color in angular?

HTML:

<body>
    <app-main></app-main>
</body>

CSS:

*margin{
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

Print:inserir a descrição da imagem aqui

  • For the record, there is a <body> in an angular design, it stands in the index.html and if you want to apply the style to the body, just put it in the style.css

  • I even tested it here and it worked

2 answers

2

The tag <body> exists in angular yes.

When you create a new project, inside the folder src some files are created:

Estrutura de pastas

And inside the archive index.html Voce will find the html base code with the tag <body>

inserir a descrição da imagem aqui

even within it is the tag <app-root> which is where your components are rendered

to change the css of this page, just add it in the file styles.css, which is also generated in the creation of the project, the style of the body you have already made:

inserir a descrição da imagem aqui

See the result in the standard Angular project template: inserir a descrição da imagem aqui

  • I’ll test, thank you very much for the information!

1

This is wrong:

*margin{
  margin: 0;
  padding: 0;
}

The right thing would probably be this *, which is the global selector, so:

* {
  margin: 0;
  padding: 0;
}

But you don’t really need to take the spacing out of everything, in case it would just point to HTML and BODY:

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

Still worth remembering that other elements with margin can affect the elements "parents", read more on:

  • I honestly never understood mt well the need for this implementation (* { margin: 0; padding: 0; }), I use it as a custom I acquired in college kk

Browser other questions tagged

You are not signed in. Login or sign up in order to post.