Angular style handling

There are several ways to reach the styles and stylesheets in Angular. All of them have their strength. This article will give you a breif overview of the ways to get styles and stylesheets into your Angular project.

Angular uses both common handling (that can be use in all kind of web development, not just Angular) and handlings specific for Angular.

The SASS/SCSS part is some kind of in the middle. They are implemented in Angular, if you want to, but they are standalone tools and can be use in any kind of project, not just in Angular projects.

Common handling

• Inline style
• ID style
• Class style

SASS/SCSS handling

• styles.scss in src-folder
• @use

Angular handling

• Styles
• StyleUrls
• Styles + StyleUrls

Common handling

Inline style

When to use: Use it when you quickly wants to test some mockup styles directly in the HTML or when all other solutions has been consider.

<div style=”width: 100px; height: 100px; background-color: red;”></div>

The most definitive way to use a style and should be handled with care.
The reason to be careful, is that inline style is non-dynamic and only affects the element to which it is applied too.
However, it has the advantage of being the final styling after all others are done, which makes it powerful the few times it is used.

ID style

When to use: When set a style to a single element.

HTML:

<div id="myBox"></div>

Stylesheet:

  #myBox {
    width: 100px; 
    height: 100px; 
    background-color: red;
  }

The way to address an element id gives you a way to pinpoint a specific element. The id follows by a unique name that will be used in the CSS starting by a hashtag. The name should not be given to more than one element to work the proper way, and you can only set one id style in an element. (…Yes, you CAN have several elements with the same id, but it is not supposed to work that way…)

Class style

When to use: When to style multiple elements.

HTML:

<div class="myBox padding"></div>

Stylesheet:

  .myBox {
    width: 100px; 
    height: 100px; 
    background-color: red;
  }
  .padding{
  padding: 20px;
  }

Class style is the most common way to address elements. The big difference from id styles is that you can only have one id style per element, but you can have more than one class assigned to an element AND (this is important) because of the reading flow of the cascade — the classes will be read from left to right, and if two styles are similar — the later one will override a former one.

HTML:

<div class="myBox padding newBackground"></div>

Stylesheet:

  .myBox {
    width: 100px; 
    height: 100px; 
    background-color: red;
  }
  .padding{
  padding: 20px;
  }
  .newBackground {
  background-color: blue;
  }

In this example the background will be blue, because .newBackground will override the background from .myBox.

You can also style via the tag — for example <p>, <div>, <table>, <h3>.
If so — use the tag name without the dot:

<div></div>

  div {
    width: 100px; 
    height: 100px; 
    background-color: red;
  }

SASS/SCSS handling

styles.scss in src-folder

When to use: For styles that needs to be global.

When you create a new Angular project, you will have a main stylesheet in the src-folder. This stylesheet can be reached globally in the application. It means that any HTML tag can be styled from one place.

The upside is that you have the ability to do global styles in just one place. A second upside is that you do not need to link it to other files as you would in StyleUrls. This file is linked via angular.json.

The downside is if you put everything in this file, you will end up in very large file.

The styles.scss is the lowest stylesheet in the hierarchy, so any changes in the components will override the styles.

@use

When to use: To combine stylesheets together.

This is not an Angular specific feature, but a SASS/SCSS feature, and is useful when add styles, mixins and functions from other stylesheets.

The way to use it is very simple. Just add @use '<path>/<stylesheet>' at top of the stylesheet you want into. Then you can use styles from the linked in stylesheet.

This stylesheet have font styles:

h1 { font-size: 40px; }
.myText { color: #fff; }

In this stylesheet the font styles har linked in with @use:

@use './fonts.scss'
div { width: 300px; height: 300px; background-color: red; }',

And in the component the only url needed is the one to the pre-set styleUrls and the HTML can then use all the styles from both stylesheets:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div id="myBox">
      <h1>My headline</h1>
      <p class="myText">Line 1</p>
      <p class="myText">Line 2</p>
    </div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {}

Angular handling

Styles

When to use: When there is just a few styles in a component.

You can address styles directly inside a component with styles. This will come in handy if you got a small component, with a few styles attached to it.

The styles is basic an array with strings, where you either use the single quotes ' ' or back quotes` `. The back quotes have the advantage to let you do line breaks like a regular stylesheet.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div id="myBox">
      <h1>My headline</h1>
      <p class="myText">Line 1</p>
      <p class="myText">Line 2</p>
    </div>
  `,
  styles: [
    'div { width: 300px; height: 300px; background-color: red;}',
    `h1 {
      font-size: 40px;
     }
     .myText {
      color: #fff;
     }
    `
  ]
})
export class AppComponent {}

StyleUrls

When to use: When more than one stylesheet is needed.

This is the default settings in Angular. When you create a new component, Angular will set it up with one HTML-file and one stylesheet (SCSS, SASS or CSS). The stylesheet will be automatically linked in the component via styleUrls.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div id="myBox">
      <h1>My headline</h1>
      <p class="myText">Line 1</p>
      <p class="myText">Line 2</p>
    </div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {}

Then you will be using the linked stylesheet as ususal.

div { width: 300px; height: 300px; background-color: red; }',
h1 { font-size: 40px; }
.myText { color: #fff; }

You can link to more than one stylesheet if you want to. Remember the rule of CSS — the late styles will override the former.

styleUrls: ['./app.component.scss', '../fonts/fonts.component.scss']

Styles + StyleUrls

When to use: When more than one stylesheet and a few component specific styles is needed.

Yes, you can mix Styles and StyleUrls. Just be aware of that styles always overrides styleUrls.

  styleUrls: ['./app.component.scss'],
  styles: ['.myText {color: green}']

Wrap it up

I hope this article will give you an overview of the ways to handle your styles in Angular. If you want to know more about SASS/SCSS, I encourage you to read the documentation at https://sass-lang.com/.