How to apply css on one html file only

Question

I'm building a website with AngularJS. And I'm using Plangular in order to create a customized Soundcloud Player. So I include my template like this :

<body>
  <div id="container">
   <div id="header" ng-controller="HeaderCtrl"><div ng-include="'templates/Header.tpl.html'"></div></div>
   <div id="body" ng-view></div>
   <div id=""><div ng-include="'templates/Player.tpl.html'"></div></div>
   <div id="footer" class="center" ng-controller="FooterCtrl"><div ng-include="'templates/Footer.tpl.html'"></div>
  </div>
</body>

So as you can see I got a header, a body and a footer. In the middle of it I got a player. I included the specific CSS file in that template and only in that template, but the CSS are in a way applied to my whole page. I need those css. ANd I thought that included the css only on that page would help, but it's not.

Thanks for your help guys !

SeanCannon · Accepted Answer · 2014-11-24 21:55:49Z

1

Just prefix the CSS rules

Player.tpl.html :

<div class="player"> whatever </div>

CSS

.player .someclass {

}

.player .some-other-class {

}

answered Nov 24, 2014 at 21:55

SeanCannon

78.2k17 gold badges126 silver badges145 bronze badges

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

Collectives™ on Stack Overflow

How to apply css on one html file only

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related