Angular applications are styled with standard CSS. That means you can apply\neverything you know about CSS stylesheets, selectors, rules, and media queries\ndirectly to Angular applications.
\nAdditionally, Angular can bundle component styles\nwith components, enabling a more modular design than regular stylesheets.
\nThis page describes how to load and apply these component styles.
\nYou can run the
For every Angular component you write, you may define not only an HTML template,\nbut also the CSS styles that go with that template,\nspecifying any selectors, rules, and media queries that you need.
\nOne way to do this is to set the styles property in the component metadata.\nThe styles property takes an array of strings that contain CSS code.\nUsually you give it one string, as in the following example:
The styles specified in @Component metadata apply only within the template of that component.
They are not inherited by any components nested within the template nor by any content projected into the component.
\nIn this example, the h1 style applies only to the HeroAppComponent,\nnot to the nested HeroMainComponent nor to <h1> tags anywhere else in the application.
This scoping restriction is a styling modularity feature.
\nComponent styles have a few special selectors from the world of shadow DOM style scoping\n(described in the CSS Scoping Module Level 1 page on the\nW3C site).\nThe following sections describe these selectors.
\nUse the :host pseudo-class selector to target styles in the element that hosts the component (as opposed to\ntargeting elements inside the component's template).
The :host selector is the only way to target the host element. You can't reach\nthe host element from inside the component with other selectors because it's not part of the\ncomponent's own template. The host element is in a parent component's template.
Use the function form to apply host styles conditionally by\nincluding another selector inside parentheses after :host.
The next example targets the host element again, but only when it also has the active CSS class.
The :host selector can also be combined with other selectors.\nAdd selectors behind the :host to select child elements, for example using :host h2 to target all <h2> elements inside a component's view.
You should not add selectors (other than :host-context) in front of the :host selector to style a component based on the outer context of the component's view. Such selectors are not scoped to a component's view and will select the outer context, but it's not native behavior. Use :host-context selector for that purpose instead.
Sometimes it's useful to apply styles based on some condition outside of a component's view.\nFor example, a CSS theme class could be applied to the document <body> element, and\nyou want to change how your component looks based on that.
Use the :host-context() pseudo-class selector, which works just like the function\nform of :host(). The :host-context() selector looks for a CSS class in any ancestor of the component host element,\nup to the document root. The :host-context() selector is useful when combined with another selector.
The following example applies a background-color style to all <h2> elements inside the component, only\nif some ancestor element has the CSS class theme-light.
/deep/, >>>, and ::ng-deeplinkComponent styles normally apply only to the HTML in the component's own template.
\nApplying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for\nthat rule. Any style with ::ng-deep applied becomes a global style. In order to scope the specified style\nto the current component and all its descendants, be sure to include the :host selector before\n::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style\ncan bleed into other components.
The following example targets all <h3> elements, from the host element down\nthrough this component to all of its child elements in the DOM.
The /deep/ combinator also has the aliases >>>, and ::ng-deep.
Use /deep/, >>> and ::ng-deep only with emulated view encapsulation.\nEmulated is the default and most commonly used view encapsulation. For more information, see the\nView Encapsulation section.
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools.\nAs such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep).\nUntil then ::ng-deep should be preferred for a broader compatibility with the tools.
There are several ways to add styles to a component:
\nstyles or styleUrls metadata.The scoping rules outlined earlier apply to each of these loading patterns.
\nYou can add a styles array property to the @Component decorator.
Each string in the array defines some CSS for this component.
\nReminder: these styles apply only to this component.\nThey are not inherited by any components nested within the template nor by any content projected into the component.
\nThe Angular CLI command ng generate component defines an empty styles array when you create the component with the --inline-style flag.
You can load styles from external CSS files by adding a styleUrls property\nto a component's @Component decorator:
Reminder: the styles in the style file apply only to this component.\nThey are not inherited by any components nested within the template nor by any content projected into the component.
\n You can specify more than one styles file or even a combination of styles and styleUrls.
When you use the Angular CLI command ng generate component without the --inline-style flag, it creates an empty styles file for you and references that file in the component's generated styleUrls.
You can embed CSS styles directly into the HTML template by putting them\ninside <style> tags.
You can also write <link> tags into the component's HTML template.
When building with the CLI, be sure to include the linked style file among the assets to be copied to the server as described in the CLI wiki.
\n\nOnce included, the CLI will include the stylesheet, whether the link tag's href URL is relative to the application root or the component file.
\nYou can also import CSS files into the CSS files using the standard CSS @import rule.\nFor details, see @import\non the MDN site.
In this case, the URL is relative to the CSS file into which you're importing.
\nWhen building with the CLI, you must configure the angular.json to include all external assets, including external style files.
Register global style files in the styles section which, by default, is pre-configured with the global styles.css file.
See the CLI wiki to learn more.
\n\nIf you're building with the CLI,\nyou can write style files in sass, less, or stylus and specify those files in the @Component.styleUrls metadata with the appropriate extensions (.scss, .less, .styl) as in the following example:
The CLI build process runs the pertinent CSS preprocessor.
\nWhen generating a component file with ng generate component, the CLI emits an empty CSS styles file (.css) by default.\nYou can configure the CLI to default to your preferred CSS preprocessor\nas explained in the CLI wiki.
Style strings added to the @Component.styles array must be written in CSS because the CLI cannot apply a preprocessor to inline styles.