Manage CSS Files in Microsoft Power Pages
Manage CSS Files in Microsoft Power Pages
CSS (Cascading Style Sheets) controls the visual appearance of your Microsoft Power Pages website. Power Pages includes several default CSS files, while also allowing makers and developers to upload custom CSS files to implement advanced branding, layouts, and styling customizations.
Understanding Power Pages CSS Architecture
By default, Power Pages includes the following CSS files:
- bootstrap.min.css – Provides Bootstrap framework styling.
- theme.css – Contains theme-specific styles.
- portalbasictheme.css – Stores Power Pages base styling.
You can customize styling through the Styling Workspace or upload additional CSS files to extend website functionality and branding.
Manage Custom CSS Files in the Styling Workspace
The Styling Workspace provides an easy way to manage CSS files without accessing Portal Management directly.
- Open Microsoft Power Pages.
- Select your website and choose Edit.
- Navigate to the Styling Workspace.
- Select More Options.
- Choose Manage CSS.
The Manage CSS interface displays both system and custom CSS files associated with your website.
Upload Custom CSS Files
You can upload your own CSS files to apply custom branding and styling rules.
- Open the Manage CSS window.
- Review the existing CSS files.
- Select Upload.
- Choose your CSS file.
- Upload and save the configuration.
Once uploaded, the CSS file becomes available as a Web File within Portal Management.
Manage CSS Priority and Precedence
Custom CSS files can be reordered to control which styles are applied when multiple CSS rules target the same element.
| Option | Description |
|---|---|
| Move Up | Increase file priority. |
| Move Down | Reduce file priority. |
| Disable | Temporarily disable the CSS file. |
| Enable | Reactivate a disabled CSS file. |
CSS Architecture and Loading Order
Power Pages applies CSS files according to a predefined loading hierarchy.
| CSS File | Priority |
|---|---|
| theme.css | Lowest |
| Custom CSS Files | Medium |
| portalbasictheme.css | Highest |
This architecture encourages makers to use the Styling Workspace for standard customizations while allowing developers to extend functionality through custom CSS.
Delete a Custom CSS File
If a custom CSS file is no longer needed, you can remove it from the website.
- Open the Portal Management App.
- Navigate to Web Files.
- Locate the custom CSS file.
- Filter by Name or Website if necessary.
- Select the CSS file.
- Choose Delete.
- Save your changes.
Sync Configuration Changes
After deleting or modifying CSS files, synchronize the website configuration.
- Open Design Studio.
- Select Sync Configuration.
- Wait for synchronization to complete.
- Refresh the website.
The updated styling changes will now be reflected across the site.
Benefits of Using Custom CSS
- Implement advanced branding requirements.
- Create custom layouts and page designs.
- Enhance user experience.
- Override default theme styling.
- Support enterprise design standards.
- Maintain consistent visual identity.
Best Practices
- Use the Styling Workspace whenever possible.
- Keep custom CSS organized and documented.
- Minimize unnecessary overrides.
- Test styling changes across devices.
- Review CSS precedence before deployment.
- Maintain backups before major styling changes.
Summary
Managing CSS files in Microsoft Power Pages allows organizations to create customized and branded website experiences. By understanding CSS architecture, file precedence, upload management, and synchronization processes, developers can effectively control the visual appearance of Power Pages websites while maintaining scalability and maintainability.