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 copy the html contents of one iframe to another iframe including CSS?

    How to spread elements evenly (horizonatly)?

    How does positioning work in HTML/CSS?

    How can a user add content to a website? [closed]

    c3.js - how to show hand cursor on bar chart hover

    How to make CSS scroll panel for custom purposes?

    How do you get multiple views in one window like JSFiddle does [closed]

    How do I keep a horizontal column of divs in the same row when it is extends past the screen?

    How to make a simple timer image slideshow using HTML and CSS

    How to correctly set background image in a HTML page using a JavaScript function

    how to show product info after image in bigger zoom levels

    How do I stop the text from overlapping?

    How to apply css style on the list of div by defending on the class name using javascript

    How to set bold only to first level list elements? [duplicate]

    How to keep active menu item underlined?

    How to create a curve tail for speech bubble with CSS?

    CSS: How to make a span link to expand?

    How do I reduce the vertical space between list items in an unordered list?

    How can I make dynamic progress bar using just jquery?

    How to center a 3 column Css Div Site?

    How to force enter key to make a line break inside iframe editor

    How to improve the rendering of my HTML/CSS button?

    how to position images in even positions

    How to secure css and js files means end user could not download our css and js file?

    How can I do this: text inside rectangle using HTML/CSS?

    CSS: How do I 'raise' the last photo in this page?

    How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?

    How to Change CSS Styling on a Checkbox on Hover with JQuery

    How to make CSS file more important than another CSS file? [closed]

    how to create a facebook look alike gallery with css and jquery? [closed]