How do I override default PrimeFaces CSS with custom styles?

Question

I\'ve created my own theme as a separate Maven project, and it is loaded correctly.

Now I want to change the size of an component. For example, a

Answer 1

I'm using PrimeFaces 6.0. Here's some information I would have liked to have regarding this:

If you use , it will work, but your CSS will not be loaded last even if it's last in the tags (other CSS files will be included afterwards). A trick you can do which I learned from here is to place it inside , which must go inside the body, like so:

  
    
  
...

Then your CSS will be the last loaded. Note: you will still have to adhere to the specificity rules as BalusC outlined.

I placed "MyCSS.css" in WebContent/resources/css/.

More information on the resource loading order: http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces