using css file in a jsf page

Question

i want to design a jsf page with css using file style.css . it doesn't work for me . this is jsf which i want to design the component command button with the id="login"

    <h:head>
        <meta charset="UTF-8"></meta>
        <title>gidee</title>
    </h:head>

    <ui:define name="metadata">
    </ui:define>
    <ui:define name="content">
        <f:view>
        <div id="div1">
                    <H4>Connexion</H4>
                <h:outputStylesheet library="css" name="style.css"  />               
            <h:panelGrid styleClass="panelGridCenter" columns="1" cellpadding="5">


                <p:inputText id="email" name="email" label="email" 
                    placeholder="email" required="true" value="#{loginBean.email}" requiredMessage="le champ username est obligatoire"/>


                <p:password id="password" name="pw" label="Mot de passe" 
            placeholder="mot de passe"  required="true"  value="#{loginBean.password}" requiredMessage="le champ mot de passe est obligatoire"/>
                    <p:commandButton id = "login" value="Login" action ="#{loginBean.login}" >
                    </p:commandButton>
                <f:facet name="footer">
                </f:facet>
            </h:panelGrid>
        </div>
 </f:view>
    </ui:define>
</ui:composition>

and the style.css

 #login{
        background: #3966CE !important;   border: 0;
      padding: 15px;
      color: #FFFFFF;
      font-size: 14px;
      -webkit-transition: all 0.3 ease;
      transition: all 0.3 ease;
      cursor: pointer; width: 100%; 

    }