Adding custom css to directive and isolating it from the page css - AngularJS

Question

I have searched for the possibility to add a custom CSS file to a directive in AngularJS. But haven't found any solution. Is it possible? If not, is there another way of separating the block of code I want a custom style too. My code:

app.directive("tabs", function () {
    return {
        restrict: 'EA',
        replace: true,
        styleUrl: ['tabs.css'],<--Did not work- I know it might only be a Angulr2 thing.
        template: `
                     <!-- Tabs -->
                    <div class="container">
                        <ul class="nav nav-tabs">
                            <li ng-class="{ active: isSet(1) }">
                                <a href ng-click="setTab(1)">Home</a>
                            </li>
                            <li ng-class="{ active: isSet(2) }">
                                <a href ng-click="setTab(2)">Profile</a>
                            </li>
                            <li ng-class="{ active: isSet(3) }">
                                <a href ng-click="setTab(3)">Messages</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div ng-show="isSet(1)">
                              //Tabcontent
                            </div>
                            <div ng-show="isSet(2)">
                            //Tabcontent
                            </div>
                            <div ng-show="isSet(3)">
                                   //Tabcontent
                            </div>
                        </div>
                    </div>
                    <!-- Tabs -->
                `    };

I got it working, but it still messes with the page css. It is not confiend to the directive selector.