Then, choose project location with the help of Browse button and click "Create".

Now, the project structure will be created like below.

CSSXamarinForms:It is for Shared Code

.Droid: It is for Android.

.iOS:It is for iOS.

This article will explain the below topics,

How to apply styling to our Xamarin.Forms app with CSS

New properties in Xamarin.Forms 3.0

1) How to apply styling to our Xamarin.Forms app with CSS

Step 1:

Make sure all three of your projects (PCL, Android and iOS) have Xamarin.Forms 3.0 or later.

Option 1:

Right, click on Packages->AddPackages,

Now Search Xamarin.Forms Package, and make sure to select version 3.0 or later.

Click on AddPackage

Option 2:

Right click On Xamarin.Forms packages under Packages folder in all platforms, then click on Update, it will install the latest version of Xamarin.Forms.

NoteIf we don't update Xamarin.Forms we will get the below error.

Step 2:

Now we are going to create CSS Styles file,

Right click on your PCL project => Add => New Folder and name it “Styles”. After that we need to create styles file by right click on “Styles” folder => Web => Empty CSS File and name it css like below,

Default CSS file Build Action is None but it should be EmbeddedResource, if not CSS file will fail to load.

NoteIf we did't change CSS file Build Action to EmbeddedResource will get the below error. So make sure it is EmbeddedResource.

Inheritance:Here we can declare nested layout styles using CSS. In the first row I've taken StackLayout with two children (Labels) and in the second row I have taken Button, see the examples below for applying styles