Effective CSS style applied to an element

AXISHK
AXISHK used Ask the Experts™
on
How to debug which CSS styles have been applied to an element and which styles are overrided ?

Thx
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
use the browsers developer tools.  e.g. for chrome it is Ctrl+Shift+i or F12

More information here:
https://developer.chrome.com/devtools


I often right click on an element on the page and click "inspect".  This also brings up the devtools, specifically targeting that element.  That's important as you can see on the CSS/Styles panel exactly what CSS has been applied AND what has been overridden.

Clipboard01.jpg

Author

Commented:
What is the user agent style in the inspect window ... the one that I can't  see in my coding....

Thx
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
You can find the user-agent on the network tab.  Just reload the page and look at any of the requests made by the browser. Is that what you are after?

Clipboard02.jpg

Author

Commented:
I mean the one shown in the attached file.. Is it the one that applied by default browser setting ?

Thx
CSS.png
Owner (Aidellio)
Most Valuable Expert 2015
Commented:
Ah I see... for your nav element, yes the "user agent" is what the browser does by default.  In this case, just displays as "block"

Then above that I can see you're applying a custom style (can't see the actual file) to the nav element.

At the top of that window, click "computed" to see all the styles that affect that element.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial