Understanding structural and skinning CSS

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.

Shortcuts for opening DevTools: F12 (Windows), command + option + I (Mac).

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...