--- title: "Using CSS on a Page" slug: "using-css-page" description: "This document shows how to use CSS in Pages in Decisions. Preexisting CSS documents can be uploaded to Decisions and their custom-defined classes can be assigned to each element, or a CSS document can be made using Decisions' predefined classes, which in turn will map them automatically to their respective form components." updated: 2025-08-01T20:16:51Z published: 2025-08-01T20:16:51Z --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt > Use this file to discover all available pages before exploring further. # Using CSS on a Page ## Overview Apply custom or predefined CSS styles to [**Page Components**](https://documentation.decisions.com/v9/docs/page-component-glossary) to control layout, typography, color, spacing, and other visual properties. CSS offers a flexible way to standardize the look of Pages across the project or apply targeted visual tweaks to specific controls like Report Viewers, Panels, Buttons, and more. There are two main ways to apply CSS to Pages: - Predefined CSS Class Names within Style Sheets: Write and upload a CSS file that includes predefined class selectors. If written correctly, these styles will automatically apply to matching components when the Style Sheet is selected in the Page Designer. - Custom Class Names: Assign one or more custom class names to individual components using the CSS Class field in their properties. This allows for precise, targeted styling using reusable utility classes. --- ## Uploading Custom CSS File Before applying custom classes to a Page or it's control, [upload](https://portal.document360.io/v9/docs/uploading-css) the desired CSS file to the project: 1. Navigate to Manage > Configuration > Templates > CSS. 2. Upload your CSS file (e.g., ReportCSS). This file should contain class definitions that will be referenced in the Page. Example CSS ```css /* Root Report Viewer styling */ .CustomStyledReport { background-color: #ffffff !important; } /* Cell styling */ .CustomStyledReport .dp-report-grid-viewer__cell, .CustomStyledReport .dp-report-grid-viewer__cell-content { font-size: 16px !important; font-weight: normal !important; font-style: normal !important; color: #000000 !important; text-transform: uppercase !important; text-decoration: none !important; } /* Row height and layout */ .CustomStyledReport .dp-report-grid-viewer__header, .CustomStyledReport .dp-report-grid-viewer__row-holder, .CustomStyledReport .dp-report-grid-viewer__cell-content, .CustomStyledReport .dp-report-grid-viewer__groupheader { min-height: 36px !important; } .CustomStyledReport .dp-report-grid-viewer__header { height: 36px !important; background-color: #c3377a !important; } /* Header name text styling */ .CustomStyledReport .dp-report-grid-viewer__header-name { font-size: 16px !important; font-weight: bold !important; font-style: normal !important; color: #ffffff !important; text-transform: none !important; text-decoration: none !important; line-height: 16px !important; white-space: normal !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis !important; -webkit-box-orient: vertical !important; display: -webkit-box !important; max-height: 32px !important; } /* Row styling */ .CustomStyledReport .dp-report-grid-viewer__row-holder { background-color: #ffffff !important; } .CustomStyledReport .dp-report-grid-viewer__row-holder:hover { background-color: #ffd966 !important; } .CustomStyledReport .dp-report-grid-viewer__row-holder--selected-background { background-color: #f5dae9 !important; } /* Border styling */ .CustomStyledReport .dp-report-grid--border { border-width: 0px !important; border-color: #ebebeb !important; overflow: hidden !important; } /* Footer */ .CustomStyledReport .dp-report-grid-viewer__footer { background-color: rgba(255, 255, 255, 0.4) !important; } /* Group header */ .CustomStyledReport .dp-report-grid-viewer__groupheader { background-color: #d6d6d6 !important; height: 36px !important; } /* Header interactivity (hover/active states) */ .CustomStyledReport .dp-report-grid-viewer__header-sortable-column:hover, .CustomStyledReport .dp-report-grid-viewer__header-resizable:hover, .CustomStyledReport .dp-report-grid-viewer__header-sortable-column--active, .CustomStyledReport .dp-report-grid-viewer__header-resizable--active, .CustomStyledReport .dp-report-grid-viewer__header-sortable-column:hover .dp-report-grid-viewer__icons-holder, .CustomStyledReport .dp-report-grid-viewer__header-resizable:hover .dp-report-grid-viewer__icons-holder, .CustomStyledReport .dp-report-grid-viewer__header-sortable-column--active .dp-report-grid-viewer__icons-holder, .CustomStyledReport .dp-report-grid-viewer__header-resizable--active .dp-report-grid-viewer__icons-holder { background-color: #253167 !important; } .CustomStyledReport .dp-report-grid-viewer__header-sortable-column:hover .dp-report-grid-viewer__header-name, .CustomStyledReport .dp-report-grid-viewer__header-resizable:hover .dp-report-grid-viewer__header-name, .CustomStyledReport .dp-report-grid-viewer__header-sortable-column--active .dp-report-grid-viewer__header-name, .CustomStyledReport .dp-report-grid-viewer__header-resizable--active .dp-report-grid-viewer__header-name { color: #ffffff !important; } /* Report title */ .CustomStyledReport .dp-report-header__title { font-size: 24px !important; font-weight: bold !important; font-style: normal !important; color: #c3377a !important; text-transform: uppercase !important; text-decoration: none !important; } ``` --- ## Applying CSS to a Page Once the CSS file is uploaded: 1. Open the Page Designer. 2. In the Page Properties panel, go to the APPEARANCE section. 3. In the Style Sheets List, select the uploaded CSS file (e.g., ReportCSS).Important Note on Availability in Projects - For the Style Sheets list to appear in the Form Designer, the CSS file must be uploaded within the current Project. Only then can you select it from the checklist. - If a CSS file exists only at the System level (e.g., added outside the Project or inherited from a legacy conversion), it may still apply to components where a class name is manually entered. However, it won’t appear in the Style Sheets picker, and you won’t be able to assign it visually from the Designer. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-08-01_15h51_55.png) 4. Drag a Report Viewer control onto the Page. 5. Select the Report and expand the VIEW category in the properties panel. 6. In the Control CSS Class drop down, type or select one or more class names from the CSS file. 7. Save and Close the Page Designer and view the applied changes on the [Folder the Page is applied](/v9/docs/create-pages-dashboards) to. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-08-01_15h55_33.gif) --- For further information on Pages, visit the [Decisions Forum](https://community.decisions.com/categories/Pages).