Angular 2 - CSS background-color not working

Question

I'm having problems defining body's background color, using Angular 2. I've tried change html, body, container-fluid colors, but it does not change. I also changed html and body in my app.component.css, but it did not work.

The rest of my css is ok, so the browser got the stylesheet

app.component.html:

<jogo></jogo>

app.component.css:

html, body{
    background-color: pink;
}

jogo.component

<div class="container-fluid" *ngIf="showPlay">
    <div class="row">      
     <div class="col-xs-8 col-md-8 col-lg-8c">
            <p align="center">
                Qual é<br/>a<br/>Música?
        </p>
     </div>
    </div>
  <div class="row">
    <div class="col-xs-4 col-md-4 col-lg-4"></div>
        <div align="center">
            <button type="button" class="rounded-circle">Play</button>
        </div>
  </div>    
</div> 
<div class="container-fluid" *ngIf="showJogo">
  <div class="row">
   <div class="col-xs-3 col-md-3 col-lg-3" id="tocador">
        Segunda
        <audio controls>
            <!-- caminho devera ser trocado pelo do firebase? -->
            <source src="/assets/Queen - Love of My Life.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
   </div>
</div>
<div class="row">
    <div class="col-xs-3 col-md-3 col-lg-3" id="pontos">Pontos</div>
</div>
<div class="row">
    <div class="col-xs-3 col-md-3 col-lg-3" id="tempo">Tempo</div>
</div>
<div class="row">
   <div class="col-xs-3 col-md-3 col-lg-3" id="pergunta">Pergunta</div>
</div>  
</div>

jogo.component.css:

body{
    background-color: pink;
}
p {
    font-family: 'Lobster', cursive;
    font-size: 3.0em;
    color: #990000;
    /* Rotate div */
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Safari 3-8 */
    transform: rotate(-12deg);

}
button {
    background-color: #990000;
    color: #F0D1B7;
    font-size: 1.5em;
    border: none;
    border-radius: 35px;
    width: 10%;
}

CSS NOT APPLIED AT BODY TAG:

STYLESHEET LOADED:

Ajay · Accepted Answer · 2017-12-28 03:14:41Z

16

Angular creates Shadow Dom for applying styling to different components.

To apply styling to root elements, we can use style.css in the root folder.

style.css

html, body{
    background-color: pink;
}

answered Dec 28, 2017 at 3:14

Ajay

5,0013 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Menahem Gil · Accepted Answer · 2017-12-28 00:50:57Z

0

You're using Bootstrap, so the container-fluid fills the whole screen. Try to give the element background-color with !important , you just create a new class for the main container, gives background-color with !important to override the container fluid. I think it should work

answered Dec 28, 2017 at 0:50

Menahem Gil

9812 gold badges19 silver badges43 bronze badges

Comments

fjoe · Accepted Answer · 2017-12-28 00:52:49Z

0

Bootstrap has a style for body so depending on your loading order.

Your style might be getting overridden by the Bootstrap default background-color of #fff (white);

You can load your local CSS after the bootstrap CSS.

Or add !important to your style (usual not a good practice).

answered Dec 28, 2017 at 0:52

fjoe

1,1607 silver badges15 bronze badges

Comments

ekene · Accepted Answer · 2022-05-30 19:35:51Z

0

Angular scopes component styles to the target components, so any selector targeting elements outside the component will not get applied. For instance, .tout {color: yellow} will get translated to something like .tout[_ngcontent-kls-c1] {color: yellow}. In the same way, body {background-color: pink} will get translated to something like body[_ngcontent-kls-c1] {background-color: pink} So you need to put your global styles in a global stylesheet like src/styles.css

answered May 30, 2022 at 19:35

ekene

3193 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular 2 - CSS background-color not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related