Css – Globally changing default style in Primefaces


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;

Currently, I am embedding this CSS snippet in the head of every XHTML page.

    <style type="text/css">
        .ui-widget,.ui-widget .ui-widget {
            font-size: 90% !important;

Best Solution

Create a style sheet file:


.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 <h:body> of your template using <h:outputStylesheet> (it will be auto-relocated to the end of the HTML head, after all PrimeFaces own stylesheets):

    <h:outputStylesheet name="css/default.css" />

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?