Estilo da página é sobrescrito quando importado de um arquivo css

Front-end
#1

Olá a todos, estou obtendo um comportamento estranho ao importar um arquivo CSS em uma página JSF.
Quando importo o arquivo usando a taglib <h:outputStylesheet library=“css” name=“styles.css” />, o estilo é importado, porém sobrescrito pelo padrão do richfaces.

Já quando coloco o estilo dentro da própria página, obtenho o comportamento que desejo, ou seja, o estilo sobrescreve o padrão.

Alguém já teve algum problema parecido?

Abaixo segue o código da página e do css (desta forma, não está funcionando como deveria):

messages.xhtml

[code]<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns=“http://www.w3.org/1999/xhtml”
xmlns:h=“http://java.sun.com/jsf/html”
xmlns:f=“http://java.sun.com/jsf/core”
xmlns:ui=“http://java.sun.com/jsf/facelets”
xmlns:a4j=“http://richfaces.org/a4j”
xmlns:rich=“http://richfaces.org/rich”>

<f:view>
	<h:head />
	<h:outputStylesheet library="css" name="styles.css" />
	<rich:popupPanel id="errorMessages" autosized="true">
		<f:facet name="header">
			<h:outputText value="Teste" />
		</f:facet>
		<f:facet name="controls">
			<h:outputLink value="#"
				onclick="#{rich:component('errorMessages')}.hide(); return false;">
				<h:graphicImage value="/resources/images/icons/delete.gif" alt="message" />
			</h:outputLink>
		</f:facet>
		<rich:message id="messageMarker" errorClass="errClass" fatalClass="ftlClass" infoClass="infClass" warnClass="wrnClass"/>
		<a4j:commandButton id="btnOk" value="ok" onclick="#{rich:component('errorMessages')}.hide(); return false;"/>
	</rich:popupPanel>
</f:view>

</ui:composition>
[/code]

styles.css

[code]@CHARSET “UTF-8”;

.errClass,.ftlClass,.infClass,.wrnClass {
background-size: 48px 48px;
font-size: 14px;
display: block;
padding-left: 70px;
padding-top: 15px;
padding-right: 70px;
padding-bottom: 15px;
vertical-align: middle;
}

.infClass {
background-image: url("#{resource[‘images/messages:info.png’]}");
color: blue;
}

.wrnClass {
background-image: url("#{resource[‘images/messages:warn.png’]}");
color: black;
}

.errClass {
background-image: url("#{resource[‘images/messages:error.png’]}");
color: red;
}

.ftlClass {
background-image: url("#{resource[‘images/messages:error.png’]}");
color: red;
}[/code]

#2

acontece que o css, prioriza o estilo que está no head do que o importado. Por isso, vc obtém o resultado esperado quando insere no head.

Este problema acontece, pq vc provavelmente não sobre-escreveu o os blocos de css correto do richfaces e sim ‘partes’ dele.

#3

voce esta utilizando facelets ?
se nao estiver, cada vez que vc muda de pagina ele nao vai ter mais o css importado creio eu, sendo assim necessario o importamento em todas as paginas.
procure sobre facelets usando template vc importa sómente 1 unica vez !

#4