TypeScript: Modern JavaScript Development

Styling the app

The app can be styled using CSS. Not all CSS properties are supported, but basic settings like fonts, colors, margin, and padding work. We can add a stylesheet in the app adding the following code before application.start():

application.cssFile = "style.css"; 

We will change the style of the following parts of the app:

In app/style.css, we will first give the ActionBar a background color:

ActionBar { 
  background-color: #237691; 
  color: #fefefe; 
} 

Tip

The stylesheet must be added in the app folder, instead of src. NativeScript will only load files inside app. TypeScript files are compiled into that folder, but the stylesheet should already be located there.

We will add some margin to the labels in the list and details page:

Label { margin: ...