How to Set Universal Styles in an Angular 2 Application
In this guide I examine how you can set styles that are utilized by the entire application by creating a master CSS stylesheet.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

This is going to be a nice quick guide and I'm going to show you how you can provide a master style sheet just to the index portion of the application. We're going to eventually create style sheets for every single component so that we can get a very granular set of styles based off of what we want with each component, but for right now I want to show you how you can establish some additional styles that are available to the entire application.

I'm going to create a new file at the very root. Not at the root of app, but actually at the root right next to index html and I'm going to make this a really basic set.

medium

This is not something where I'm going to be putting and loading up a bunch of styles. In fact I'm only going to put one, and it's going to be for the body. I'm going to put a background color, and the background color that I want is going to be 2 5 2 8 3 0. 

body {
  background-color: #252830;
}

Nothing changes obviously because we need to call this. So I'm going to duplicate this code and simply call styles.css

large

and now that I save that now you can see that this background is all set to this kind of dark bluish charcoal ish kind of color. And this is what I want.

large

Obviously this looks hideous right now but it's because we need to go and implement all the rest of the styles and that's where we're going to start getting into.

In the next guide we're going to start building out our navigation system.

Resources