So now that we know how to add custom style sheets and to encapsulate them inside of a component. Now let's walk through how we can add some global styles and we've technically already done this. If you open up our styles.css file which is here in the root. You can see that we already have some universal styles here. We just have one which is the body but we could very easily come to our document component here and to get rid of that code.

You can see that we're back to having that charcoal color. And if I come here and add in this class. You can see that that takes care of it. Now if you're wondering what happens if say that you have a another item and you want to have a different color you can manage this on a component basis so you can just override this style so if I wanted to change this from white to red I could add the headline call inside of the documents.component.css file hit save and you can see that now it's red.

I'm just going to get rid of it entirely because I like it being white that's the color I want to go with.

Now because we've added this to our styles.css file in the root of the system. Now we can have a full set of styles and it's available to all our other components. Now this is for a very basic application. There is no rule that says that your styles need to be here at the root. You can put these anywhere. You could do something like say that you wanted to put it inside of the app directory. I could come here click styles and add this directory in here and then we can. Pull this up in the Finder. And we can drag our styles file into our styles directory.

Then to get this working then we can open up our index, because right now if you notice if you come here and hit refresh all of our main styles are gone our custom styles are gone. So the way that you can update this is in the index.html file. You can come here and say href="app/styles/styles.css" So we're just grabbing the path here. Hit save. And you can see that we're back to having our styles.

Now we have them a little bit better organized so instead of having just one style file here. Now we have an entire directory inside of the application. And this is nice because we could organize any additional styles, so say you bring in some template that has 75 different style files. You wouldn't want those here in the root but you may want them available to the entire application. So there's no reason that they have to be stored at the root of the directory you can put them anywhere in the app you want. That's one thing I love about how annular manages assets like CSSA files gives you a lot of flexibility and you can style of them or you can structure your architecture in terms of how you're organizing your files. However you see best.

Resources

• Code at this stage