Using Inspect Element from browsers…

  • Resolved Garrett Cobarr

    (@garrett-cobarr)


    14 years, 3 months ago

    I use the Inspect Element feature in both Safari and Firefox to locate and isolate aspects of the style.css and custom.css in my theme that I would like to edit or override.

    In most cases, this method is a very accurate and a quick way to find the line number and file name of code to change but on some occasions it can give a result that I do not know how to interpret.

    When I see, “inline stylesheet,” what does this mean? How can I override this code?

    Thanks for any help.

Viewing 4 replies - 1 through 4 (of 4 total)

  • It could either be referring to a block of CSS in the <head></head> section of the page. Or it could, literally, be inline style added to an element’s markup – eg: <span style:color:red;">...</span>.

    The former can often be over-ridden in the main stylesheet by targeting the element in question a little more specifically. Eg. #content p.red will override p.red. If that doesn’t work, you can try using !important to force the browser to use a specific piece of CSS in preference to all others – eg: p.red {color:blue !important;}.

    Literal inline style, however, is really difficult (and sometimes impossible) to override.

    Thread Starter Garrett Cobarr

    (@garrett-cobarr)

    Thanks, esmi, I will give those options a try.

    When you say “inline style” that is a styling added at the post level, within the text? My example is referring to code at the style.css or overriding file custom.css. Does inline mean something else?

    When you say “inline style” that is a styling added at the post level, within the text?

    Exactly!

    Does inline mean something else?

    Strictly speaking, it means CSS added at the post level but, in some browser/CSS add-ons, it could also refer to CSS added on a per-page basis in the HEAD section. If you’re trying to override the CSS from one external sheet (style.css) in another external sheet(custom.css), you need to take into account the order in which the sheets are loaded, where the CSS is specified within that sheet and how specifically it is being targeted. Increased specificity is nearly always your best approach in these situations. The more tightly you can focus your CSS, the greater the chance that it will be used in preference to the more generic styling.

    Thread Starter Garrett Cobarr

    (@garrett-cobarr)

    Thanks! The way Woo themes works (and I am sure many other themes) They have a main style sheet (style.css) and a stub, empty style sheet (style.css) that you use to override the main styling sheet. They suggest, with good cause, that you do not touch the style.css and make all your changes in the custom.css. They further suggest, that the method to accomplish this task is to copy and paste from the style.css into your custom.css, thus creating the override.

    The only problem with this approach, is if your are like me, with a minimal and a slowly growing comprehension of CSS, targeting the exact code can be problematic. I often find ‘leaks’ of style that get through and come from another line of code. Using the Inspect Element, a feature of browsers, helps in this pursuit but obviously is not full proof.

    The other issue I struggle with is the lineal inheritance nature of CSS. If a bit is farther down the file, it gets final say.

    Thanks for taking the time to explain. Very gradually and grudgingly my brain is wrapping around this stuff.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Using Inspect Element from browsers…’ is closed to new replies.