How to override xhtml theme css?


Tags: css,struts2,themes

Problem :

I want to override some style provided in struts/xhtml/style.css. One of them is label style. In struts/xhtml/style.css the label class is defined like this on line 23:

.label {
    font-style: italic;
}

In my style file, i redefined label style using the following class:

.label {
    display: block;
    margin: auto;
    margin-bottom: 5px;
    text-align: left;
    color: #333;
    font-size:12px;
    width:150px;
    font-style:normal;
}

But my label is always in italic, when i use debug tools i see it's take xhtml property and does not override the property. Here is my complete css file :

/* Reset des properties */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    /*font: inherit;*/
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*Definition des properties pour le projet OCC*/
/*tags html*/
body{
    margin: auto;
    padding:auto;
    align:center;
    width:995px;
    font-family:Arial,"Times New Roman", Times, serif;
    font-size:12px;
}

h1{}
h2{}
p{
margin-top:20px;
margin-bottom:20px;
}
li a {
font-weight:bold;
margin: 50px 0 ;
padding:5px;
}
/*div*/

#content{
    margin: 20px 10px 20px 10px;
    text-align:justify;
    border:1px solid #000;
}
#header{
    border:1px solid #000;
    margin:20px 0 0 0;
    overflow:hidden;
}


#headerButton{
    background-color:#6993C9;
    color:#ffffff;
    font-weight:bold;
    padding: 5px 15px;
    height:2px;
    width:auto;
    padding: 7px 10px 34px 10px;
}

#headerButton a:link:first-child{
    color:#ffffff;
    margin: 0  0 0 10px;
}
#headerButton a:link{
    color:#ffffff;
    margin: 0 10px 0 0;
    text-decoration:none;
    font-size:11px;
}
#headerButton a:hover:first-child{
    color:#e6e6e6;
    margin: 0  0 0 10px;
}

#headerButton a:hover{
    color:#e6e6e6;
    margin: 0 10px 0 0;
    text-decoration:none;
}
#imageOrange24{
margin:0 5px -10px 0;
padding: 0 0 0 0;

}

#formWrapper{
margin:50px auto 50px auto;
padding:50px 50px 50px 50px;
width:300px;
}



#formWrapper  tr{
margin: 0 0 10px 0;
}
#wwFormTable tr{
margin: 0 0 10px 0;
}

#menu{
    float:left;
    width:125px;
    height:200px;
    margin: 20px 10px 20px 10px;
    border:1px solid #000;
}

#adminMessageBox{

    float:left;
    border: 2px blue solid;
    width:400px;
    height:200px;
    margin: 20px 10px 20px 10px;
    border:1px solid #000;

}
#waitingActionBox{
    float:right;
    border: 2px blue solid;
    width:400px;
    height:200px;
    margin: 20px 10px 20px 10px;
    border:1px solid #000;

}

/*div englobant la liste des brochures*/
#listeBrochures{

}

#search{
margin:0 0 20px 10px;
}
#dateCreation{

    margin: 0 0 0 5px;
}
/*classes*/
.fontGeneralTitle{
    float:left;
    display:block;
    font-size:24px;
    font-weight:bold;
    color:#6993C9;
    padding: 20px 0 0 0;
    margin: 0 0 0 30px;
}
.formLogin {
    font-family: Arial,Verdana, Helvetica, sans-serif;
    border: 1px solid #ccc;
    width: 200px;
    margin: auto;
    margin-top: 100px;
    text-align: center;
    -moz-border-radius: 70px 10px;
    padding: 10px;
}
.inputs {
    display: block;
    margin: auto;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    color: #333;
}

.label {
    display: block;
    margin: auto;
    margin-bottom: 5px;
    text-align: left;
    color: #333;
    font-size:12px;
    width:150px;
    font-style:normal;
}

.boutonLogin {
    margin-top: 15px;
    background-color:#f79646;
    color:#ffffff;
     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    behavior: url(/css/rounded/border-radius.htc);
    border-radius: 5px;
}

.tdLabel{

}


.boxTitle{
    width:100%;
    font-weight:bold;
    color:blue;
    text-align:center;
    margin:10px 0;
    text-decoration:underline;
}

.auteur{
    float:right;
    color:black;
    font-weight:bold;
    margin-right:10px;
}
.center{
    text-align:center;
}

.alignleft{
    float:left;
    margin:20px 0 50px 10px;
}
.alignright{
    margin:20px 100px 0 0;
}

.bold{
    font-weigth:bold;
    line-height:1;
}
.clear{
    float:clear;
}
.floatLeft{
    float:left;
}
.floatRight{
    float:right;
}

Here is my generated html form :

<div id="formWrapper"> 

        <form id="LoginAction" name="LoginAction" action="/OCC/LoginAction.action" method="post">
<table class="wwFormTable">
            <tr>
    <td class="tdLabel"><label for="LoginAction_login" class="label">Identifiant: /label></td>
    <td
><input type="text" name="login" size="20" value="" id="LoginAction_login" class="inputs" title="Entrer votre identifiant"/></td>
</tr>

            <tr>
    <td class="tdLabel"><label for="LoginAction_password" class="label">Mot de passe:</label></td>
    <td
><input type="password" name="password" size="20" id="LoginAction_password" class="inputs" title="Entrer votre mot de passe"/></td>
</tr>

            <tr>
    <td colspan="2"><div align="right"><input type="submit" id="LoginAction_0" value="Valider" class="boutonLogin" title="Cliquer pour se connecter"/>
</div></td>
</tr>

        </table></form>

Thanks for helping



Solution :

Have you tried?:

.label {
    display: block;
    margin: auto;
    margin-bottom: 5px;
    text-align: left;
    color: #333;
    font-size:12px;
    width:150px;
    font-style:normal !important;
}

The !important annotation should override the style.


    CSS Howto..

    How to make these scale right in CSS (block with horizontal and vertical attachés)

    I am having a hard time figuring out how to dynamically setup a timeline

    How often to use REM in CSS [closed]

    How to toggle overlay with no body scroll using the same button / div

    How to resize a chosen jquery dropdownlist on windows resize

    How to style child components from parent component's css file?

    How to decrease the page load time when multiple css are used

    How to select not first tr and not last td

    How to add left border with image(s) dynamically

    How are the invalid CSS lines interpreted?

    How to put bootstrap code inline

    CSS Horizontal Menu has wrong x-position, how to put directly under parent menu?

    How to override inline css through javascript?

    Magento - how to locate the location of inline css

    how to hide an image on css active in IE

    How to fix position of html element label with css?

    I want to apply an existing CSS style to all labels on a page. How?

    How to resize the images to have the same height in group while keeping aspect ratio?

    How do I keep my exiting CSS from compiled LESS

    How to make background fill or flush to the footer at the bottom of the window

    How to apply a single line of CSS to an external iframe?

    How to override active admin CSS?

    How can I style a button to look the same as the home button in Google Chrome with CSS? [closed]

    How can i remove all attributes from any css selector? To override and reset any css id selectors?

    how to read content in a webpage that doesn't appear in page source

    How to vertically align data in the center of a table cell in HTML?

    How to create login popup on mouseover on a link using css & or javascript.

    How to do responsive text overflow with css?

    How to hide submenu until it is hovered over by mouse

    How to move nagivation bar to more to the right to fit a logo left of the bar