How to use different CSS in the same page


Tags: css,jsf-2,primefaces

Problem :

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



Solution :

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


    CSS Howto..

    How to select an element that must have more than one css class?

    CSS: How to make a div block *not* take space in its parent container

    How to find last/first not empty child using only CSS?

    HTML 5 / CSS (??) how to cause a div element to be on the next line?

    How to line up the bottom of side-by-side Div layers in CSS

    How can I ensure this CSS transition animates

    How to catch div position and reposition it later (on MAC)

    How to adjust 100% browser height and width with CSS?

    How do I make a textarea resize properly when I resize browser window?

    How to fit a button to a hover box? And the button is not displaying properly?

    IBM Worklight - How to disable Native device features?

    Change how CSS border edges meet? [duplicate]

    how to make text transparent without changing to an image using css

    How to make possible vertical scroll on popup and disable vertical scroll for page by using CSS?

    How to change the hover pseudo class of an element using jquery

    How to make image previews (thumbnails) using html/css

    JavaScript, AngularJS: How do I know if element is larger than its container?

    How to render a template containing CSS with }} sequence inside using Twig

    CSS: How to add background-color with background-image under it (same color)

    How to use Resource bundle(Client Bundle) in JSNI?

    How can I create the behavior of a two-frame horizontal-tiled frameset with divs/css?

    How to arrange div as a dock panel?

    how to set css position absolute in hover state

    how to apply transition effect in expand/collapse inside gridview rows

    How can I change the colour of individual squares on this grid…?

    how to change width of without affecting width

    How can I workaround this CSS anomaly?

    how to make vertical progress path using css

    How to avoid calling “fonts.googleapis.com/css?family=..” for my CSS files

    How do you make a button increase in size (125%) for few milliseconds and then return it original size on click?