Hello,
I’m chasing for the right css element on my site www.madebymaud.com to change it and very often I see with Firebug “element.style”:
http://imgur.com/u9gGcyY and http://imgur.com/cNzNcWw
This is a general element that requires some other element? How can I find how can I determine correctly this “element.style”? I tried here and there, and this element comes back in different forms … I’m lost.
Appreciate your advice, guys!
I’m not sure I totally understand what you are asking, but the element.style refers to a style attribute that is assigned directly to the element. (inline style) If you look at your first screenshot: http://i.imgur.com/u9gGcyY.png you can see the style element on the selected division.
There is no way to change this unless you edit the actual inline styles. 
CSS isn’t my strongest area, but wouldn’t using !important over-ride inline styles?
I don’t think so. !important can be used to overwrite other included styles but not inline. Err, scratch all that. Google teaches me something new:
div[style] {
background: yellow !important;
}
That will work as long as the inline styles do not have !important on them also and from your screenshot they don’t appear to. 
I think I have never had experience to change inline styles. As I understand inline style it’s something like this: <div class=“wpb_wrapper”> ? And to change it I should do something like this div[wpb_wrapper] {
height: 100px;
}
Right?
“inline style” is the style hard coded into the mark-up. eg.
<div … style=“whatever”>
Ok, I got it. How can I modify hard-coded element it?
For example with Firebug on my right side I see:
element.style {
color: #000000;
}
And on my left side the element I should refer to but as you say we are talking about hard-coded inline style:
<div class=“wpb_wrapper”>
<div class="wpb_text_column wpb_content_element ">
<div class=“wpb_wrapper”>
<p style=“font-size: 50px;”>
<span style=“color: #000000;”>Our Work.</span>
</p>
So, I guess it’s “wpb_wrapper” that is responsible. How can I change the parameters of it?
The line that is colored red is the “element.style” that Firebug is describing.
Take a look at this example. Copy it to a test .html file and open it in your browser. Change the !important values. Play with it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template</title>
<!--
All lines are colored blue in CSS.
The second line is colored RED using inline style.
The third line is italic using inline style but !important in CSS overrides the inline style.
-->
<style type="text/css">
p {
font-size:1.5em;
color:blue; /* the inline style overrides this css style */
font-style:normal !important; /* !important here overrides the inline style */
}
</style>
</head>
<body>
<p>This is a line of test text.</p>
<p style="color:red">This is a line of test text.</p>
<p style="font-style:italic">This is a line of test text.</p>
</body>
</html>
The only way to change it is in html file? That is pretty annoying Because I’d like to stick to style.css file to track the changes…
The example that I posted shows that you can override an inline style using !important in CSS… just like the other folks have explained.
Exactly why style attributes in tags is bad practice IMHO - can be a maintenance nightmare.
The same is true for having javascript in tags.
When I had my first “site” many many years ago I did what I saw other pages had done, changing things somewhat to what I wanted.
It wasn’t that bad when I had only a few simple pages to edit, but as the number of pages grew and became more complex it became increasingly more difficult to make simple changes.
I quickly learned the benefits of “separation”
Thank you. I’m newbie in CSS. Normally I pick up the element like:
.blog-post-title a {
color: inherit;
display: block;
font-style: normal;
}
And I modify it in child stylesheet, it doesnt affect the main code and I keep all my modifications in one place and can maintain heavy content website.
With this element.style that points somewhere … I’m sorry, but I’m really lost how can I modify it and maintain?
Hi,
I think you are still misunderstanding what the others have been saying
In truth there is no such rule as ‘element.style{}’. It is merely Firebug (or other webdeveloper tool) allowing you a hook to make a change to that current element while using Firebug.
‘element’ refers to the element you have selected in the left panel of Firebug. If there is no style applied to it then Firebug pops up element.style which allows you to add rules as though you were adding them inline.
In effect you are changing this:
<span>test</span>
to this:
<span style=“color:red”>test</span>
If the element already has an inline rule applied (via the style attribute):
<span style=“color:red”>test</span>
Then Firebug also shows that in the right panel window as an ‘element.style{}’ rule.
If you need to change that rule from your stylesheet then you can only do that by using !important as mentioned above a number of times but you must also have some way of uniquely targeting that element. Sometimes you can do it from a parent class.
.orbit-slide .article{background:red!important}
However sometimes there is no unique context and although you may be able to say #wrapper span{color:red!important} then you will end up styling all spans and not just the single one you wanted. If there is nothing unique about the element you want to change and you can’t find a target it via any css selectors then you cannot change it. Usually with advanced css selectors you can probably reach the element using :nth-of-type() or [URL=“http://reference.sitepoint.com/css/pseudoclass-nthchild”]something similar but that will depend on a specific structure which may not be true for a dynamic situation.
If you can point out the exact element you want to change in your page then we can help provide a concrete example.