[IONIC] Set Global Styling
![[IONIC] Set Global Styling 1](https://cdn-images-1.medium.com/max/800/1*3ujoO7R7es6i6n81l6nxNQ.jpeg)
In order set any styles globally which should be used throughout the entire app, you will have to use global.scss. This file is available in src folder.
#global.scss
You can put any style classes here and can access them from any where in the app. To add or put style class here, there multiple ways:
i. Directly write your style class in side global.scss
![[IONIC] Set Global Styling 2 1*SofAhRpmgz0OK79joioDiA](https://cdn-images-1.medium.com/max/800/1*SofAhRpmgz0OK79joioDiA.png)
ii. Write all your style class in app.scss or any scss file, and import them in global.scss
![[IONIC] Set Global Styling 3 1*Fzz4mw7cTL7zatOMCHIw9g](https://cdn-images-1.medium.com/max/800/1*Fzz4mw7cTL7zatOMCHIw9g.png)
Primarily you can use the global.scss file for managing your app font-family, font-size, etc. Also, if you are try to custom design any Default UI Components like Alert Box, Popup Messages, etc., you can use global.scss to put their style classes.
#Import a font-family and use throughout the App
You can use this file as an entry point to import other local or external CSS/Sass files. For e.g., I want to use a font-family which I found in Google Fonts. Just copy the CSS link and import it in the global.scss file.
![[IONIC] Set Global Styling 4 1*n5XJY 43DTpefFGtnmchVQ](https://cdn-images-1.medium.com/max/800/1*n5XJY_43DTpefFGtnmchVQ.png)
Hope this will help you out understanding how to and when to use global.scss in Ionic.
Thank You…
Contact me at
Email: [email protected]
WhatsApp: +91 890 888 0324
