CODEWITHSUNDEEP
cssstylesheet
jross
jross

Reputation: 59

How to determine which stylesheet rules are applied

I've inherited code where a web page references several stylesheets. Within the code, there is a div class reference to "container". But "container" exists within several of the referenced stylesheets. How can I determine which one it is referencing? Thank you.

Upvotes: 1

Views: 69

Answers (2)

Paul
Paul

Reputation: 136

Reading some questions of that kind belonging to same class- names in several css- files with different rules the most common answer is that the last included css "rules".

I think of dynamically inserting the css- style- tags into the head of the index.html before adding the corresponding html to the DOM so when generating html with javascript you can do that and then insert your generated html to the index.html- body.

This way you can control which css is inserted last and by that being used.

By its dynamical nature this solution won't apply to static sites.

Upvotes: 0

Mike Dinescu
Mike Dinescu

Reputation: 55760

What browser are you using?

Both Firefox and Chrome have excellent developer tools built in that allow you to inspect the DOM of your page and determine what styling rules are applied to each element and in what order, including what files they are located in.

For example, in Chrome, start by right-clicking on an element on the page and then chose "Inspect" from the menu. You will see in the Styles section what rules were applied and from which files. (see: https://developers.google.com/web/tools/chrome-devtools/css/)

Upvotes: 1

Related Questions