How to use different CSS in the same page

Question

How can I use different CSS in the same page?

For example I have two primefaces header in the same page and I want to apply different CSS for them.

Is there a way to do this? When I try to add below lines inside head tags, just one of them is working.

<h:outputStylesheet library="css" name="myheader1.css" />
<h:outputStylesheet library="css" name="myheader2.css" />

CSS files:

.ui-layout-unit-header{
    font-size: 20px;
    border: none;
    text-align: center;
    background-color: buttonface !important;
}

.ui-layout-unit-header{
    font-size: 10px;
    border: none;
    text-align: center;
    background-color: buttonface !important;
}

Any idea how to resolve this problem

in your example the second css file will overwrite the first file. this may help you — Pete
– Pete, Commented Sep 11, 2013 at 14:03

Marc Audet · Accepted Answer · 2013-09-11 14:04:00Z

3

If you two CSS rules with the same selectors, the second one loaded in the second style sheet is the one that will be used.

This concept is known as the cascade, and described in the CSS specification:

http://www.w3.org/TR/CSS2/cascade.html#cascade

answered Sep 11, 2013 at 14:04

Marc Audet

47k11 gold badges68 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kalaiarasan Manimaran · Accepted Answer · 2013-09-11 14:08:30Z

1

You can't , All CSS on page will be applied (the HTML "knows" nothing about this process), and the individual rules with the highest specificity will work. Specificity is determined by the selector and by the order they appear in the document. This is part of the cascading.

answered Sep 11, 2013 at 14:08

Kalaiarasan Manimaran

1,6781 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to use different CSS in the same page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related