title: CSS style not getting applied on JSF page
body: <p>I have created a new css file and added the following style in it:</p>
  
  <pre><code>.op-label {
      color: orange;
  }
  </code></pre>
  
  <p>I've placed this file 'hms.css' in </p>
  
  <blockquote>
    <p>"/webapp/resources"</p>
  </blockquote>
  
  <p>folder.</p>
  
  <p>I've included this in my JSF template file BasicTemplate.xhtml as follows:</p>
  
  <pre><code>&lt;h:head&gt;
      &lt;title&gt;&lt;ui:insert name="title"&gt;Basic Template&lt;/ui:insert&gt;&lt;/title&gt;
      &lt;h:outputStylesheet name="hms.css"/&gt;
  &lt;/h:head&gt;
  </code></pre>
  
  <p>Here is how I am using this style with my output component in my faces page:</p>
  
  <pre><code>&lt;p:outputLabel value="First Name" styleClass=".op-label"&gt;&lt;/p:outputLabel&gt;
  </code></pre>
  
  <p><strong>Issue</strong>: The style is not applied on the rendered html.  Rendered html code snipped it below:</p>
  
  <pre><code>&lt;head&gt;
  
      &lt;link href="/HMSWeb/javax.faces.resource/theme.css.xhtml?ln=primefaces-sunny" rel="stylesheet" type="text/css"&gt;&lt;/link&gt;
      &lt;link href="/HMSWeb/javax.faces.resource/hms.css.xhtml" rel="stylesheet" type="text/css"&gt;&lt;/link&gt;
      &lt;link href="/HMSWeb/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&amp;v=4.0" rel="stylesheet" type="text/css"&gt;&lt;/link&gt;
      &lt;script src="/HMSWeb/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=4.0" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/HMSWeb/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=4.0" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/HMSWeb/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&amp;v=4.0" type="text/javascript"&gt;&lt;/script&gt;
      &lt;title&gt; … &lt;/title&gt;
  
  &lt;/head&gt;
  </code></pre>
  
  <p><strong>Question</strong>: What is the reason for this?  Any help would be appreciated.</p>
  
  <p>Thank you!</p>