Globally changing default style in Primefaces

Question

How should I change and apply changes to the default style of primefaces globally and only once?

.ui-widget,.ui-widget .ui-widget {
    font-size: 90% !important         


        

Answer 1

Create a style sheet file:

/resources/css/default.css

.ui-widget, .ui-widget .ui-widget {
    font-size: 90%;
}

(please note that I removed the !important "hack", see also How do I override default PrimeFaces CSS with custom styles? for an in-depth explanation of how to redefine PF styles)

Include it in the of your template using (it will be auto-relocated to the end of the HTML head, after all PrimeFaces own stylesheets):

    
    ...

If you aren't using a master template and thus need to include this in every single page, I recommend to reconsider your page design and to utilize JSF2 Facelets templating capabilities. This way you've only one master template file where all defaults of both the head and the body are definied. See also this answer for a concrete example: How to include another XHTML in XHTML using JSF 2.0 Facelets?