Angular 2 styleUrls not applied

Question

I started learning Angular 2. I have a problem when using extenal css for Components.
It works fine when I hard-code the style in the html tag itself. But the css is not applied when loaded via external css using styleUrls

If the css worked then the image would resize to 250px and p tags font-size would be 50px .But both dint happen

Attaching my Plunkr

https://plnkr.co/edit/j1GrrI5NMHSXqgdgECH4?p=preview

app.html

<div class="carousel carousel-slider center" data-indicators="true">
  <div class="carousel-fixed-item center">
    <a class="btn waves-effect white grey-text darken-text-2">Skip To Site</a>
  </div>
  <div class="carousel-item accent-color white-text" href="#one!">
    <div class="row">
      <img src="http://materializecss.com/images/yuna.jpg" alt="Profile Pic" class="circle responsive-img slider-profile-pic">
    </div>
    <p class="slider-text white-text">Hello There</p>
    <p class="slider-text white-text">Welcome To My Website</p>
  </div>
  <div class="carousel-item accent-color white-text" href="#two!">
    <p class="slider-text white-text">Second Panel</p>
    <p class="slider-text white-text">This is your second panel</p>
  </div>
  <div class="carousel-item accent-color white-text" href="#three!">
    <p class="slider-text white-text">Third Panel</p>
    <p class="white-text">This is your third panel</p>
  </div>
  <div class="carousel-item accent-color white-text" href="#four!">
    <p class="slider-text white-text">Fourth Panel</p>
    <p class="slider-text white-text">This is your fourth panel</p>
  </div>
</div>

app.css

.carousel-slider {
  height: 100vh;
}

.slider-profile-pic {
  width: 250px;
}

.slider-text {
  font-size: 50px;
}

app.ts

import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

declare var $: any;

@Component({
  selector: 'my-app',
  templateUrl: './app.html',
  styleUrls: ['./app.css']
})
export class App implements OnInit {
  name:string;
  constructor() {
    this.name = 'Angular2'

  }

  ngOnInit(): void {
    $('.carousel.carousel-slider').carousel({ fullWidth: true });
  }

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 1

Your css is not applied due to the css of the carousel.

The css selector of the carousel images is .carousel .carousel-item img and your css selector is .slider-profile-pic. Your css selector is less specific, therefore the carousel's css is applied.

You can force your css with !important:

.slider-profile-pic {
  width: 250px !important;
}

.slider-text {
  font-size: 50px !important;
}