How to Override Primefaces default CSS?

Question

I am trying to overriding the Primefaces Theme my css look like this in file1.xhtml

.ui-menubar {
    font         


        

Answer 1

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?