7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 CSS Styling and Adding Images

Even though NativeScript views are created in XML, not HTML, you can still use CSS to style them. In this lesson, I'll teach you how. I'll also show you how to add images to your layouts.

3.3 CSS Styling and Adding Images

Hello everyone. I am Reggie Dawson, welcome to the NativeScript in mobile angular two cores from tuts plus. In this video, first we will learn about styling our app. Then after that we will learn how to handle images in our app as we build our app and add the various components to it, we need a way to style the app and make it look good. Now I know that I said before that the NativeScript templates aren't HTML but we can still use CSS styling on it. NativeScript only includes a subset of the CSS language. If we look at the documentation for styling we can see the options that we have for adding styles. CSS styles can be applied to our app on three different levels. The first level we can apply is Application-wide. These styles are used across the entire app. This is how our CSS is applied in our sample app right now. If you look at the app.css file in our app folder, we can see the styles that are applied to our app already. Here we are using NativeScript components as well as the class selectors that we use in CSS. We will talk further about the selectors available to us in a moment. Now if we look back at the documentation we can also see how we can override the application-specific CSS files with one having a different name. When the NativeScript app starts it looks for the app dot CSS file and loads it if it exists. We can also supply a different file by adding it to our NativeScript bootstrap. Next we have component level styles that apply only to the component. These styles will apply to this component regardless of where it is located. Just like our template, we can apply the styles in-line or in an external file. By adding the style or style URLs array to our component, we can add component based styles. If we look at the documentation, we first see the style array with an in-line style. This inline style will apply to the third class to set the background color to line. Then if we look at the style URLs component array we see that we just supply the name of an external CSS file to use. The documentation also shows us how we can add CSS to our component through plain JavaScript by using the page class we can access the add CSS and add CSS file methods. These allow us to supply inline CSS as well as external CSS files outside of the style or style URL's array. Either way you want to add styles to your component is acceptable and the choice is up to you. The third level we can add styles at is inline directly in our XML template. These inline styles take precedent over the component in application level style. It is as simple as adding a style attribute to our elements to use an inline style. Now although the inline style takes precedent over all of the styles, it is advisable to place your styles inside of external files at the application or component level. This is because a lot of styles in line, or inline in a component, would clutter up our ad. Now that we understand how we can style our app. We need to understand what kind of selectors we can use with NativeScript templates. Again, since they are XML, accessing the elements will be different. The first selected that we have is the type selector, this represents the different components of NativeScript and are similar to CSS element selectors. We can use these selectors to apply styles to our elements in CSS instead of directly in the XML like we did in the component video. Then we have the class selector that is the same as CSS and preceded by a period. We can also manipulate the class through JavaScript as well as XML through the CSS class property. Next we have the ID selector which is also the same as CSS and preceded by a pound sign, after that we have an attribute selector that can be used alone or combined with other CSS selectors. If you ever have a question about what CSS properties are supported, you can always refer to this documentation. The last thing we will talk about is how we handle images in a NativeScript project. When we use images, we have three ways that we can access them. The first way is for us to access an image through a URL. This is an image that exists on the web and as a result, our device needs Internet access to use this image. Any image you access with HTTP or HTTPS will be a URL based image. The second way to access images is from the local file system. We can save the images in a folder in our app folder. Then when the project is compiled our images will be copied over, when we access the images we have to use the folder that contains it. In this example we are using a folder called Images. Now the last method of accessing images is through the native methods of the device. In the app resources folder we have Android and iOS folders. In these folders there are different folders that correspond to different pixel densities. Basically when we provide images for our devices, it is suggested that we offer different images to handle the varied resolution of devices. This example of the Android app resources folder shows the different densities we need to provide images for. That's all you need to know about styling your app and handling images. In the next video, we will get started with building our app.

Back to the top