We help IT Professionals succeed at work.

Effective CSS style applied to an element

AXISHK
AXISHK asked
on
220 Views
Last Modified: 2017-03-23
How to debug which CSS styles have been applied to an element and which styles are overrided ?

Thx
Comment
Watch Question

RobOwner (Aidellio)
CERTIFIED EXPERT
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)
CERTIFIED EXPERT
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)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions