CODEWITHSUNDEEP
cssangular
Abhishek Chattejee
Abhishek Chattejee

Reputation: 3

how to add html, body selector style for a particular component?

I want to implement a bootstrap login template in my angular component. The template has a css style having html, body selector styling. When I add the css in global styles, it's working, but when I add the css in the component.css file, it's not working. Where shall I add the template css in the angular component?

login.component.css

html, body {
    background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    font-family: 'Numans', sans-serif;    
}

When I am adding the above code in the global styles.css file, the page is opening, but adding the css in login.component.css is not working.

Upvotes: 0

Views: 227

Answers (1)

mpro
mpro

Reputation: 15050

To style top tags like <html> or <body> you need to put your styles into main styles.css file located usually in src folder of your project, there where your index.html file is.

Since components styles are encapsulated, they do not affect the rest of application. There were some tricks like /deep/, >>>, or ::ng-deep to omit View Encapsulation, but those are already deprecated. Read more here.

Upvotes: 1

Related Questions