Global CSS Styles In Angular

The Code Points July 01, 2022 0

To add Global (Application wide styles) styles to an Angular application, there are a few options. Styles can be added directly inline, via index.html import, or via angular-cli.json. We can use angular to add component-specific styles to particular components that will override global styles. In this article, we will learn how to add global CSS styles to Angular projects. We will also learn how to include custom CSS files and an external style sheet into an Angular application.

Example

To start, use the following command to create an example application.

ng new GlobalStyle

Let's add a new element.

ng g c test

The TestComponent will be created in the folder test and added to the AppModule with the command above.

Add the following HTML to the test.component.html file.

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

Now open the app.component.html file and copy the HTML code below.

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

Add the following code under the app.component.ts file.

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

When you run the app, you'll see the following.

Let's now add the global CSS Styles to the previously mentioned example application.

Adding global CSS styles

Using Angular-CLI

If you used the Angular CLI to construct the Angular App, you may add the custom CSS files to the styles array in angular.json.

The styles.css file is automatically added to the src folder by angular.

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

Add the following CSS rule to the styles.css file.

p { color : blue}

The CSS rules are packed into styles.bundle.js and injected into the head section when you use the angular.json configuration file to add CSS files.

Adding multiple style sheet

Add the following CSS style to morestyles.css in the src/assets/css folder.

p { color : red}

Then, as seen below, add the CSS file to the angular.json file.

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

The order of the styles sheets is critical since the last one overrides any CSS rules that were previously inserted.

Adding an external style sheet

There are three ways to include external style sheets in your project.

Copy them locally

For example, to include Bootstrap 4, go to https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css and copy the newest version into the assets/css/bootstrap.min.css folder.

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

Installing the npm package provided by the third-party libraries is another approach. The CSS files are placed in the node modules directory. Run the npm command to install bootstrap, for example.

npm install bootstrap

Then, as seen below, add it to angular.json.

"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 easily import them into one of the style sheets. Open styles.css, for example, and add the following import statement at the start.

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

Adding Styles directly

If you don't want to use angular-cli, you can connect it directly in the index.html file, as seen below. Even if you're using the angular-cli, you can use this.

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

The local CSS files are listed below.

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

The path must point to the index.html file.

Unlike when using angular-cli, these style sheets are not included in the bundle and must be loaded separately.

Conclusion

In angular apps, we learned how to define and load global style sheets. We'll show you how to style angular components in the following article.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.