Styling with CSS

Xamarin.Forms supports styling via CSS files. For web developers, it can be more intuitive to use compared to XAML styling. It provides a subset of the functionalities you would expect from normal CSS, but support is getting better with each version. We are going to use two different selectors to apply the styling we need.

First, let's create the style sheet. We'll discuss the content of it afterward:

1. Create a folder called Css in the Chat project.
2. Create a new text file in the Css folder called Styles.css.
3. Copy the style sheet into that file, as follows:

button {
 background-color: #A4243B;
 color: white;
}
 
.chatHeader {
 color: white;
 font-style: bold;
 font-size: small;
}
 
.chatText {
 color: white;
 font-size: small;
}
 
.remoteMessage {
 background-color: #F04D6A;
 padding: 10;
}
 
.localMessage {
 background-color: #24A43B;
 padding: 10;
}

The first selector, button, applies to every button control in the entire application. It sets the background color to...