Global CSS
Learn how to globally apply CSS to the app.
We'll cover the following
We have a functioning app, but it looks hideous. We’re going to be deploying the application so that the world can enjoy our fantastic little app. However, before we do, let’s add some styling to make it more presentable. Angular makes loading CSS into our app simple.
Installing Bootstrap
There are various CSS frameworks available. Any of them will work with Angular. Feel free to use whichever framework you prefer. This is not a CSS course. Hence, the reason we’ll be installing a framework to help us with CSS. It’s a quick and easy way to add some styles to an app.
For this app, we’ll be using Bootstrap. We’ll need to install it using the following command:
npm install bootstrap
The next thing we’ll do is import the Bootstrap CSS. There are two ways we can approach this.
Importing CSS
The first way is to use the src/styles.css
file. This file is a stylesheet that will be applied globally to the application. We’ll use it to add Bootstrap to our project. At the top of the file, we’ll import the CSS.
@import 'bootstrap/dist/css/bootstrap.min.css';
angular.json
The second way is to update the angular.json
file. We briefly looked at the angular.json
file in an earlier lesson. This file can be used to configure how our Angular project is compiled. It’s the settings that the CLI will use when serving and building the project.
Let’s review the relevant properties.
The first layer will have a property called projects
. This is a list of projects in the current directory. We only have one. Inside it, we’ll find the reverse-phrase
project. This is where we can configure the settings for this specific project.
Inside the project’s settings, there’s a property called architect
. The architect
property can be used to configure how the CLI will build the project corresponding to the command that’s building the project.
"architect": {
"build": {},
"serve": {},
"extract-i18n": {},
"test": {},
"lint": {},
"e2e": {}
}
If we look inside this object, the name of the properties will correspond to the commands in the package.json
file. We can tell the CLI to build the project differently, depending on what we’re doing.
We’re going to be modifying the build
property. You may be wondering, “Why the build
property instead of the serve
property?” It’s true: we are running the ng serve
command for development.
However, the serve
command uses the build
command behind the scenes. This means both the serve
and build
objects are used. The serve
object takes priority and will overwrite the properties in the build
object.
There are some overlapping properties between both objects. You’ll be able to figure out which property will be used by observing them. In the build
object, there’s a property called options
, where we can configure additional options for the build.
Inside it, there’s an array called styles
. This is an array of CSS files that should be bundled with the project. The CSS will be applied globally to the application. styles
is not defined in the serve
object, so we can add it to the build
object since it will be merged with the serve
object.
Taking a closer look, we’ll notice the src/styles.css
file is there. We can add on to this array to load the Bootstrap CSS, as shown here:
"styles": [
"src/styles.css",
"bootstrap/dist/css/bootstrap.min.css"
]
We aren’t going to load the CSS in the angular.json
file. It’s a matter of preference. I find modifying the src/styles.css
file to be more comprehensible.
Updating the HTML
One final step is to update the template to use the classes in the Bootstrap framework. The changes we make will be purely cosmetic. We aren’t going to modify the bindings or interpolation we added to the template.
Get hands-on with 1200+ tech skills courses.