Using CSS in Xamarin Forms

Question

I have successfully paired a visual element on a XAML page with a CSS file

<ContentPage.Resources>
    <StyleSheet Source="/CSS/MyCSS.css" />
</ContentPage.Resources>

 <Label Text="{Binding CurrentNewsItem.content_text}"
 Margin="16,8,16,0"
 Grid.Row="3"
 HorizontalOptions="Start"
 VerticalOptions="Start"
 TextType="Html"/>

I am reading in a content feed from an external source which has different style element requirements, e.g. it is marked up with H1, H2, P and so on

I can set 'global' elements in my file, like so, and it works fine

• {
  margin: 0;
  padding: 0;
  border: none;
  color: white;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-
  Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  }

However, the following is completely ignored, and I can't find a single example on the net of how to target an HTML element specifically

This, for example, is completely ignored

h1 {
font-size: 22px;
text-transform: uppercase;

}

Please can someone tell me what I am missing?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

h1 will be ignored., because xamarin forms do not have h1 element. You can change h1 to button or stacklayout to make a test.

   h1 {  
       font-size: 22px;  
       text-transform: uppercase;  
      }  

If you do not know how to set it with CSS, you can refer to this thread.

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/css/#selecting-elements-by-type

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.