Angular Global CSS styles

Introduction:

There are several ways to add Global (Application wide styles) styles to the Angular application. The styles can be added inline, imported in index.html, or added via angular-cli.json. The angular allows us to add the component-specific styles in individual components, which will override the global styles. In this blog, we will learn how to add global CSS styles to angular apps. We will also learn how to add custom CSS files & external style sheets to angular applications.

If you want to learn about a new feature of angular, you can refer here.

Example Application

First, create an example application using the following command

ng new GlobalStyle

Let us add a new component

ng g c test

The above command will create the TestComponent under the folder test and adds it to the AppModule

Open the test.component.html and add the following HTML

<p>
  this para is from test component
</p>

Now open the app.component.html add copy the following HTML

<h1>
  Welcome to {{ title }}!
</h1>
 
<p>This para is from app component</p>
 
<app-test></app-test>

app.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Global Style';
}

Run the app and you will see the following

Now let us add the global CSS Styles to the above example application

Adding global CSS styles

Using Angular-CLI

If you have created the Angular App using Angular CLI, then you can add the custom CSS files in angular.json under the styles array

You will find it under the node projects-> GlobalStyle -> architect -> build -> options -> styles

By default, the angular adds the styles.css under the src folder.

 ],
            "styles": [
              "src/styles.css"
            ],

The reference to the CSS file is relative to where angular.json file is stored. which is project root folder

Open the styles.css and add the following CSS rule

p { color : blue}

When you add CSS files using the angular.json the configuration file, the CSS rules are bundled into the styles.bundle.js and injected into the head section

Adding multiple style sheet

Create a morestyles.css under the folder src/assets/css and add the following CSS style

p { color : red}

Next, add the CSS file to the angular.json as shown below.

"styles": [
  "src/styles.css",
  "src/assets/css/morestyles.css"
],

The order of the style sheets is important as the last one overrides the previously added CSS rules.

Adding an external style sheet

There are three ways you add the external style sheets.

Copy them locally

For example, to include Bootstrap 4 you can copy the latest version from the link 

https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css and copy it under the folder assets/css/bootstrap.min.css

"styles": [
  "src/styles.css",
  "src/assets/css/morestyles.css",
  "src/assets/css/bootstrap.min.css"
],

The other option is to install the npm package provided by the third-party libraries. The CSS files are copied under the node_modules folder. For Example, to install Bootstrap run the following npm command

npm install bootstrap

And then add it to the angular.json as shown below

"styles": [
  "src/styles.css",
  "src/assets/css/morestyles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Import it in one of the style sheets

You can import them directly in one of the style sheets. For Example, open the styles.css and add the following import statement at the top.

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css";

Adding Styles directly

If you are not using angular-cli, then you can go old school and link it directly in the index.html file as shown below. You can use this even if you are using the angular-cli.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

The following includes the local CSS files.

<link rel="stylesheet" href="assets/css/morestyles.css">

The path must be with reference to the index.html

These styles sheets are not included in the bundle but loaded separately unlike when you are using angular-cli.

Summary

We learned how to define and load global style sheets in angular apps. In the next article, we will show you how to add styles to angular components.

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.