Angular templates can add CSS styling by referencing external CSS files using the styleUrls directive or by adding inline CSS by way of the styles directive. Both directives can be present in the same component but the inline and external styles will not render. No errors will be thrown. Testing shows that only the style directive defined last will take effect.

In the code snippet below the CSS within the styles directive will take effect. The CSS in the external style.css file will be ignored.

@Component({
moduleId: module.id,
styleUrls: ['../assets/css/style.css'],
styles: [
'.topInputLabel { padding:5px 0 0 5px; }',
'.inputLabel { padding:0 0 0 5px; }',
'.topInputField { padding:5px 5px 0 5px; }',
'.inputField { padding:0 5px 0 5px; }'
],
templateUrl: 'my.component.html',
})


Move the styleUrls directive after the styles directive as in the code snippet below and the opposite is true. The CSS in the external style.css file will take effect and the inline CSS of the styles directive is ignored.

@Component({
moduleId: module.id,
styles: [
'.topInputLabel { padding:5px 0 0 5px; }',
'.inputLabel { padding:0 0 0 5px; }',
'.topInputField { padding:5px 5px 0 5px; }',
'.inputField { padding:0 5px 0 5px; }'
],
styleUrls: ['../assets/css/style.css'],
templateUrl: 'my.component.html',
})