Each component is styled with CSS and contains two layers of style information: structural or component-specific and skinning or component-independent styles. In this section, you will understand the difference between these two types of CSS, learn some useful selectors, and see an exemplary styling of the Paginator component in the generated HTML. Let's start. Go to the Paginator showcase (https://www.primefaces.org/primeng/#/paginator) and explore the HTML code of the Paginator component. The next screenshot shows the HTML and styles in the Google Chrome DevTools.
The highlighted line in the preceding screenshot represents the container element of the Paginator component with the following style classes:
- ui-paginator
- ui-unselectable-text
- ui-widget
- ui-widget-header
The first two style classes ui-paginator and ui-unselectable-text are generated by PrimeNG. These are structural style classes. The first one provides a semantic presentation to indicate the role of an element. Other examples for such style classes are ui-datatable for a table and ui-button for a button.
The second one is applied in situations where you want to avoid accidentally copy-pasting useless things, such as icons or images. In general, structural style classes define the skeleton of the components and include CSS properties such as margin, padding, display type, overflow behavior, dimensions, and positioning.
As already said, PrimeNG leverages the jQuery ThemeRoller CSS Framework. The ui-widget and ui-widget-header classes mentioned earlier are defined by ThemeRoller and affect the look and feel of the underlying HTML element and associated component. These are skinning style classes, which define CSS properties such as text colors, border colors, and background images.
| Selector | Applies |
| .ui-widget | This is the class applied to all PrimeNG components. It applies, for example, font family and font size. |
| .ui-widget-header | This is the class applied to the header section(s) of a component. |
| .ui-widget-content | This is the class applied to the content section(s) of a component. |
| .ui-state-default | This is the default class applied to clickable, button-like components, or their elements. |
| .ui-state-hover | This is the class applied on a mouseover event to clickable, button-like components, or their elements. |
| .ui-state-active | This is the class applied on a mousedown event to clickable, button-like components, or their elements. |
| .ui-state-disabled | This is the class applied to components or their elements when they are disabled. |
| .ui-state-highlight | This is the class applied to components or their elements when they are highlighted or selected. |
| .ui-corner-all | This is the class that applies corner radius to all four corners of a component. |
| .ui-corner-top | This is the class that applies corner radius to both top corners of a component. |
| .ui-corner-bottom | This is the class that applies corner radius to both bottom corners of a component. |
| .fa | This is the class applied to elements representing an icon. |
These styles are applied consistently across all PrimeNG components, so a clickable button and accordion tab have the same ui-state-default class applied to indicate that they are clickable. When a user moves the mouse over one of these elements, this class gets changed to ui-state-hover, and then to ui-state-active when these elements are selected.
This approach makes it easy to ensure that all elements with a similar interaction state will look identical across all components. The main advantage of the presented PrimeNG selectors is a great flexibility in theming because you don't need to know each and every skinning selector to change the styles of all available components in your web application consistently.
Free themes use the relative em unit to define the font size of the widgets having the .ui-widget class. This is 1em by default. For example, the Omega theme defines the following:
.ui-widget {
font-family: "Roboto", "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
}
Thanks to the em unit, the font size is easily customizable. It is suggested to apply a base font size on the body element to adjust the size of components throughout the web application:
body {
font-size: 0.9em;
}