To create and use an External Stylesheet in a Canvas App, follow these steps:
Create a new Stylesheet file: Open a text editor and create a new file. Save the file with a .css extension. For example, you could name the file “styles.css”.
Write your CSS rules: In the Stylesheet file, write the CSS rules that you want to apply to your Canvas App. For example, you could define a class for headings like this:
.heading {
font-size: 24px;
font-weight: bold;
color: #333;
}
Upload the Stylesheet file to a cloud storage location: You can upload the Stylesheet file to a cloud storage location such as OneDrive, SharePoint, or Azure Blob Storage.
Copy the URL of the Stylesheet file: After uploading the Stylesheet file, copy the URL of the file. This URL will be used to reference the Stylesheet file in your Canvas App. For example, the URL might look like this:
Reference the Stylesheet file in your Canvas App: In the Power Apps designer, open the “Advanced properties” pane for the screen or control that you want to apply the Stylesheet to. In the “CSS stylesheet URL” property, paste the URL of the Stylesheet file that you copied in step 4.
Save and publish your Canvas App: Save your changes to the Canvas App and publish the app.
After completing these steps, the CSS rules in your Stylesheet file will be applied to the relevant screens or controls in your Canvas App. This provides a convenient way to centralize and manage your app’s visual styling in a separate file.