How to Override Stylesheets of Primefaces

How do I override default PrimeFaces CSS with custom styles?

There are several things you need to take into account of which one or more might be relevant you your specific case

Load your CSS after PrimeFaces one

You need to ensure that your CSS is loaded after the PrimeFaces one. You can achieve this by placing the <h:outputStylesheet> referencing your CSS file inside <h:body> instead of <h:head>:

<h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="style.css" />
    ...
</h:body>

JSF will automatically relocate the stylesheet to the end of the generated HTML <head> and this will thus ensure that the stylesheet is loaded after the PrimeFaces' default styles. This way the selectors in your CSS file which are exactly the same as in PrimeFaces CSS file will get precedence over the PrimeFaces one.

You'll probably also see suggestions to put it in <f:facet name="last"> of <h:head> which is understood by PrimeFaces-specific HeadRenderer, but this is unnecessarily clumsy and would break when you have your own HeadRenderer.

Understand CSS specificity

You also need to ensure that your CSS selector is at least as specific as the PrimeFaces' default CSS selector on the particular element. You need to understand CSS Specificity and Cascading and Inheritance rules. For example, if PrimeFaces declares a style by default as follows

.ui-foo .ui-bar {
    color: pink;
}

and you declare it as

.ui-bar {
    color: purple;
}

and the particular element with class="ui-bar" happen to have a parent element with class="ui-foo", then the PrimeFaces' one will still get precedence because that's the most specific match!

You can use the webbrowser developer tools to find the exact CSS selector. Rightclick the element in question in the webbrowser (IE9/Chrome/Firefox+Firebug) and choose Inspect Element to see it.

Sample Image

Partial overriding

If you need to override a style for only a specific instance of the component and not all instances of the same component, then add a custom styleClass and hook on that instead. It is another case where specificity is used/applied. For example:

<p:dataTable styleClass="borderless">

.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
    border-style: none;
}

If a component does not support a styleClass and you are on jsf 2.2 or up, you can also use passtrough attributes and add a pt:class and have it end-up on the output.

<p:clock pt:class="borderless" />

Never use !important

In case you fail to properly load the CSS file in order or to figure the right CSS selector, you'll probably grab the !important workaround. This is Plain Wrong. It's an ugly workaround and not a real solution. It only confuses your style rules and yourself more in long term. The !important should only be used in order to override the values hardcoded in HTML element's style attribute from a CSS stylesheet file on (which is in turn also a bad practice, but in some rare cases unfortunately unavoidable).

How to override stylesheets of PrimeFaces?

If using primefaces 2.2.1, Use the h:outputStylesheet tag and include it in h:body not in h:head to override primefaces stylesheets, same with h:outputScript.

Example:

<h:body>
  <h:outputStylesheet library="css" name="YOURSTYLES.css" />
  <h:outputScript library="javascript" name="YOURSCRIPT.js" target="head" />
</h:body>

If using primefaces 3, follow this blog entry
https://www.primefaces.org/resource-rendering/

How to Override Primefaces default CSS?

CSS is applied on the HTML document as whole. CSS is not applied on a per-include-file basis or so as you seem to think. CSS does not run in webserver. CSS runs in webbrowser, after the webbrowser has parsed the HTML output retrieved from JSF and is presenting it visually to the enduser.

If you want to give a specific component a different style from default, then you should give it a class name.

<x:someComponent styleClass="someClass">

Then you can finetune the CSS selector on that:

.ui-menubar.someClass {
     ...
}

(name it more sensibly though, e.g. leftMenu, topMenu, etc)

Unrelated to the concrete problem, the !important is here being used as a workaround, not as a solution. Get rid of it and carefully read the following answer, including all of its links, in order to learn how to properly override PrimeFaces default CSS: How do I override default PrimeFaces CSS with custom styles?

Primefaces css overrides custom css

I had the same issue some days ago. You have to make sure that your stylesheet gets loaded after default PrimeFaces CSS. You can achieve this by including your stylesheet in the following way:

<h:head>
    <f:facet name="last">
        <link type="text/css" rel="stylesheet" href="/css/yourstyle.css"></link>
    </f:facet>
</h:head>

PS: Please do not use !important.

How to override CSS for a label that is part of a composite component?

This should work as per your html inspector, use !important only if there is no other way.

.fullPanel .inputBox label{
   width:25%;  
}

How to override CSS

Use box-shadow:none to reset the box-shadow to the defaults.

See this source for information about the box-shadow property. All properties can be "resetted" by defining the same property, and using the default value.

To get your myCustomStyle.css override the Primefaces' css file, you have to include your custom file after the primefaces' file.

A last resort: If your custom style doesn't get applied, add !important after your declaration (but before the semicolon): box-shadow: none !important

How to override PrimeFaces CSS via external stylesheet

<facet name="last"/> for stylesheets should only be used in <h:head/> that is where your stylesheets should end up anyway. If you load them last in your body, you can get weird manifestations in the look and feel of your ui. While loading and building the page and having some slower connections or a busy server, the PF stylesheet is used and when finished loading, your custom css kicks in. This might cause reflows, color changes abd what more

PrimeFaces: how to override CSS class

Use a standard CSS override way.

Include a *.css in your page, where you redefine ui-corner-all and ui-corner-right classes.

.ui-corner-all {
    //ovverides to nothing, you can also define any properties you want here
}

.ui-corner-right {
    //define properties  which would override unwanted behaviour
}

You can also apply additional css class which would override undesired properties.