CODEWITHSUNDEEP
css
dvmac01
dvmac01

Reputation: 489

How to see where a CSS rule is coming from?

I've inherited an .asp website and had to update the pages to relocate forms in tables to the sidebar.

It's worked fine on all but one page which stubbornly refuses to accept my css and is taking values from who knows where.

I've tried debugging in Firefox/Chrome and even written rules in the head of the page but to no avail. Is there a tool for identifying this kind of thing? I'm no slouch with css but this is baffling me. I don't want to resort to javascript to fix this as I see it as a fundamental issue.

Is there a way to find out where a css rule is coming from?

Upvotes: 30

Views: 19873

Answers (3)

Drkawashima
Drkawashima

Reputation: 9762

As pointed out by austin and Waterlink the Computed styles tab shows currently applied styles, and their origin.

The Styles tab is also useful. Right click an element, select "inspect" and the Styles tab will show a list of all applied CSS rules as they were written in the source code.

You can also see which CSS rules are overwritten. Some rule in your source code could be overwritten by either a user defined style, inline style or a css rule of higher specificity.

The formatting shows the status for a style:

  • normal text = active
  • strike through = inactive since another style has overwritten it
  • greyed out = identifier not applied. ( If you are inspecting the Style of a <p> element and the css identifier is p, span , then the span identifer would be greyed out)

Example:

chrome debugger image

In this image, the color property of #post a is inactive. It has been overwritten by the color property in #cashieCatalog.

Upvotes: 4

Waterlink
Waterlink

Reputation: 2369

Chrome web inspector:

Right click on the failing element and select inspect element.

You should end up with web inspector window with two sections: left is html nodes tree and right is styles and properties of selected node. Failing element should be selected already.

Next you need to expand "Computed Style" tab and look for offending style.

When found, you'll see a small triangle to the left of the style definition - it is clickable. On click it should expand list of selectors that affects this style for this element. You'll see the URL to the CSS for each of these.

Upvotes: 18

austin
austin

Reputation: 5866

In the HTML tab of Firebug, you should see a panel on the right with tabs Style, Computed, Layout, and DOM. Select Computed. This will show you the "current" style being applied to the page.

If you expand a rule node, you should see a link on the right showing you which style sheet it is coming from, along with stylesheet rules that are being overridden.

Upvotes: 2

Related Questions