Style NativeScript views using CSS
Let’s learn how to style those native views with CSS and understand a few things that are unique to the native platforms regarding styling. A good majority of standard web CSS properties are supported with the addition of a few like horizontal-align that are unique to native platforms.
[00:00] If we look at the app.css file in our project, we'll see a default set up here, but let's back way up. With no styles applied, we can see that our layout containers just position our components on the page as is.
[00:12] Let's start by adding a custom class here called heading. We'll give it the color purple and we'll also set the padding to 10. Let's apply that class on both of our labels here, and we can see that class applied, purple, and we've got our padding of 10.
[00:28] We can also take these inline attributes and apply them to the style, much like you could with inline style on a DOM element. So let's add here vertical-align and we'll say top. We can see our labels are still aligned to the top. We can also remove text alignment right and apply that to a new class that we'll call text-right.
[00:47] We can see our label is still aligned to the right, and just to prove that's working there, let's set a background color to yellow, and let's also set an explicit width here to 200. You can see now that we have width of 200 on our label, and it takes into consideration the padding of 10 that's coming from the heading class which is also on this label.
[01:06] Additionally, note that because this column width is set to auto, its allowing that 200 width of that label to expand. Our grid layout, though, has ultimate say. We could set 100 on that column width and ensure that everything in that column position is restrained to 100 in width.
[01:27] You may have noticed that I emitting the px which is often customary in DOM styling. The px for pixels is actually ignored with native styling, so if you have it, it is OK, but technically you do not need it. Native views support a few extra properties that are not available in DOM styling.
[01:45] Let's add a class of top-grid to our grid layout, and let's define a top-grid here, and let's say our width is 200. We see that positions the grid by default in the center. However, one native property that is not available in the DOM is horizontal-align, and we can horizontally align that layout container to the left.