Angular Global CSS styles

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 allow us to add the component specific styles in individual components, which will override the global styles. In this article we will learn how to add global CSS styles to angular apps. We will also learn how to add custom CSS files & external style sheet to angular application..

Example Application

First, create an example application using the following command

Let us add new component

The above command will create the TestComponent under the folder test and adds it to the AppModule. You can learn more such Angular CLI Commands from the Angular CLI Tutorial.

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

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

app.component.ts

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

angular.json was known as angular-cli.json in angular 5 and below

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.

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

When you add CSS files using the angular.json 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

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

Order of the styles sheets are important as the last one overrides the previously added CSS rules.

Adding 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

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

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

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.

Adding Styles directly

If you are not using angular-cli, then you an 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.

The following includes the local CSS files.

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.