Our applications looking good. We have our NAV component. We have this first set of styles. These ones provided by bootstrap. I really like what I'm seeing. But now let's start adding some custom styles and we're going to talk about how we can add styles that are specific to a component I really like how angular does this. It really helps from a code organizational standpoint it makes it very easy to be able to say I want these styles to only be available to specific components and the way that you can do this. I'm going to start off with the app component. So I'm going to have the app component up here and that's the HTML file.

Now I'm going to have the app.component.ts file as well. So any time that you want to call a custom CSS file you're going to add another item to the decorator. So here I'm going add a comma and then we'll say styleURLs just like this. And now inside of this this, this is very important to note. With templateUrl notice how it's singular styleURLs is plural. So that can tell you is that this is actually going to be an array. This gives us some good flexibility because there may be times where you might want to have a bunch of different style files available. And here you have the ability to pump all of those right in here.

But with a template, you're only going to be able to have one template file per component. So this is a good way of doing it. I'm going to create app.component.css and copy this. Now if you come into the app you'll notice that this breaks the app and the reason is because what angular is doing is it's looking for this component css file but it's not finding it. So we can fix this by simply coming to the main app directory. Right clicking on it and selecting new file

Then we're going to save this file app.component.css now that we have this we're going to be able to add styles.

And if you come over here and hit refresh now it's back and it's working. So now inside of this I want to fix our little issue with the margin. Notice how on the top we actually are getting cut off from the nav bar.

This is something that's not too difficult to fix. Let's create a class called .app-body and inside of it say margin-top. And I'm going to say 80 pixels.

.app-body {
margin-top: 80px;
}

Lets copy this and save it.

Nothing changes obviously yet because we have to call this. So inside of our router outlet so remember that with the way this is this functions kind of like just our regular nav system or our nav bar here but down here our router outlet is where all the contents are actually going to be displayed. So I'm going to create a div and put the router outlet inside of it and now inside of this I can add a class of app body which is what we just created.

<div class="app-body">
  <router-outlet></router-outlet>
</div>

And look at that. Now we have our nice lay out here.

We have a top border or top margin of 80 pixels and you can see that we have our document dashboard and this is in black and we should probably make this white. So let's come to our app.component.css and type h1 and actually let's do a special class for this just so we don't because we don't want to change all the h1's there may be times where we want our h1 to be black or to have the standard styling. So I'm going to say this is going to be .headline h1 and say color of white.

.headline h1 {
 color: white;
}

We'll test this out on this document dashboard you can see we have our page title here. If I give the class of headline it's still black.

So let's right-click and see what is going on here. Click inspect and you're going to see something that's kind of interesting. And I wanted to use this as an illustration for you know how this is working. Now, do you notice something here if I click inspect. You can see that we have h1 and headline. However, if you look here on the right-hand side there is nothing inside of here that has our color white. And the reason for this is because remember when I said that the styles are based on component to component what it's doing is we actually have our headline here which we called but it's not going to be called because it's inside of the app component and we need to add it into our regular our regular document one.

So if I delete the h1 tag from our .headline nothing happens. So how are we going to fix this? I'm going to get rid of it and save. Then let's actually create a new CSS file for documents component. Let's go to our document.component.ts and now we'll add a styleURLs property and inside of this, we're going to follow the same process I'll say documents.components.css. This is going to break the app but don't worry we'll bring it right back. By creating a new file called documents.component.css.

Now, lets add

.headline {
  color: white;
}

to it and if I hit save now it's white.

I wanted to give that as an illustration so you could see how the scoping works. And we'll also talk about how you can make some styles available to the entire application. But for right now I just want to talk about how this functions in terms of how your scoping works for your styles because that's very important. When I was originally teaching myself angular 2, I got tripped up on this because I thought that the app component should make all of these items available. However, I discovering that they were getting overwritten each time. And so we'll talk about how we can get around that in the future. But for right now just know that if you have items and you have styles that are specific to a component they have to be placed inside of that components own dedicated CSS file.

Resources

• Code at this stage