If you want to change the style of a particular component instead of all the components of a similar type, then you can add name spacing for the styles. In this case, we can append the custom CSS class name for the built-in CSS classname and use the custom CSS class for the component styleClass property.
Let's override the dialog component titlebar CSS properties, as follows:
.ui-dialog-titlebar {
// CSS properties
}
Or
.ui-dialog-titlebar.ui-widget-header {
// CSS properties
}The preceding CSS properties will be reflected across all the components.
To apply CSS to a particular dialog component, you first need to add a custom CSS class for the built-in PrimeFaces styles, as follows:
.custom .ui-dialog-titlebar {
//CSS properties
}Then, you just need to add a CSS class name to the dialog component, as follows:
<p:dialogstyleClass="custom"> .. </p:dialog>
So with the help of CSS class namespacing feature, you can make changes to specific components...