How to modify element.style?

Get Started
1

hello dear sitepointers,

I need to be pointed to the right direction before I ruin the site. I’m newbie in CSS
Here: http://dynasties-hair-creations.com/ I want to modify grey alert box below the slider. I find out in Firebug that it has en element.style - oouch :frowning: which I presume is inline CSS. That is bad for me because I’m more comfortable with external CSS. Ok, this time it’s not the case.
I’m trying to figure out how can I change the background color of this…

<div class="post-content">
<style type="text/css">
#reading-box-container-1 .tagline-shadow:before,#reading-box-container-1 .tagline-shadow:after{opacity:0.7;}
</style>
<div id="reading-box-container-1" class="reading-box-container clearfix">
<section class="reading-box " style="background-color:#f6f6f6 !important;border-width:0px;border-color:#f6f6f6!important;border-left-width:3px !important;border-left-color:#FBAEFF!important;border-style:solid;">
</div>

And element.style itself in Firebug:

element.style {
    background-color: #F6F6F6 !important;
    border-bottom-width: 0;
    border-color: #F6F6F6 #F6F6F6 #F6F6F6 #FBAEFF !important;
    border-left-width: 3px !important;
    border-right-width: 0;
    border-style: solid;
    border-top-width: 0;
}

Should I go to the HTML file and modify it directly there? Err, but how can I identify this element.style in HTML file? And what about the future maintainance of the file? Please help a newbie…

2

Just delete inline style you want to modify from HTML and style this element in CSS stylesheet.
Of course you can just modify it and change the color within this inline style in HTML :wink:

3

Normally I would agree with kenzo22 and say simply delete the styles from the HTML and add the new styles to your stylesheet. However, this is a Wordpress site, and I don’t work with Wordpress, so I’m not sure if that’s the best advice here. As well as the inline styles, there are also embedded styles.

Hopefully somebody with WP experience can give you clearer advice.

4

Kenzos Style is actually the nearly best idea.

Another approach is to simply remove the ! important from the inline rules. then apply your external rules with !important added to them. !important can be used to override inline styles, as long as the inline styles don’t have !important in them.

One tip for the newbie: segregate your code. write your modifications at the END of your stylesheet ( this way if they dont take, you can at least have a hint that specificity is involved) , or if they do take but its not what you wanted you can easily remove the code and put back the !important in the inline code to go back where you began.

hope that helps

5