Let's start by taking a look at our app's main app.css
file inside the App
directory:
/* In NativeScript, the app.css file is where you place CSS rules that you would like to apply to your entire application. Check out http://docs.nativescript.org/ui/styling for a full list of the CSS selectors and properties you can use to style UI components. /* For example, the following CSS rule changes the font size of all UI components that have the btn class name. */ .btn { font-size: 18; } /* In many cases you may want to use the NativeScript core theme instead of writing your own CSS rules. For a full list of class names in the theme refer to http://docs.nativescript.org/ui/theme. */ @import 'nativescript- theme-core/css/core.light.css';
Out of the box, the --ng
template hints at two options you could choose from to build out your CSS:
- Write your own custom classes
- Utilize the nativescript-theme-core styling framework plugin as your base
Let's explore the first option...