01 Intro - juanfevasquez/Ng-BasicStyling GitHub Wiki
Note: How to go through the examples
Each example will live in its own branch. Master will not hold any example so switch to the respective branch as you go through the explanation.
The branches available are:
- master
- demo/global-styles-in-angular
- demo/component-scoped-styles
- demo/special-css-selectors-in-angular
The Basics of Css in Angular apps
On branch: Master
Angular has provided us with quite a lot of options to work with styles in our apps. Before this we were limited to adding our styles globally, meaning we had to use a link or several link tags in our page's head to load all of the different css files. So for us it would be normal to have a link pointing to a responsive framework like Bootstrap or Foundation, then a link pointing to our own css files. Also, from time to time we would find some inline styling and also styles added dynamically to our tags with some help from javascript.
Now we are transitioning to a new way of doing things on the web. This new way is called web components and with this comes new posibilities to work with our styles.
Mind that one of the main philosophies of web components is encapsulation where a custom element has a scoped html, css and javascript. This "scoped" html and css is what is called Shadow Dom.
I have another repo where I show a very basic custom element. Click here if you want to check it out.
Using Shadow DOM, we can scope our styles to our custom elements, avoiding conflict with any global css declaration. This is the concept that Angular bases its component css architecture
But Angular doesn't use Shadow Dom (at least, not by default). Angular simulates this behavior using something called ViewEncapsulation. But, before learning more about View Encapsulation, we will learn a more traditional way to work with css in our Angular apps.
Change to branch demo/global-styles-in-angular to start our journey.