These screen captures are of the Top page here using Chrome with the dev tools docked at the bottom. I have been using dev tools for quite a long time and yet there are a still lot of features I haven’t begun to try yet, The more I explore the more amazed I am with what’s possible.
Anyway, go to a page and right-click over what you’re interested in. The context menu will open
click on “Inspect” and the dev tools will open
the element clicked on will be in the left pane with its HTML highlighted. Its CSS will be in the right pane under “Styles”. By scrolling the pane you will be able to see various selectors and rules. A rule that does not have a line through it is one that is not getting overwritten and is the rule that is in effect. eg. in this case font-family: Helvetica,Arial,sans-serif;
However, that is the font stack. By looking under “Computed” which of those my browser is using can be seen
IMHO dev tools are invaluable. the HTML can be edited, CSS rules can be added, removed, changed etc. and the page will display with those changes. Safe to do because the changes happen only in the browser. And if you find something you like you can make the changes in the actual source files for your page.
The dev tools can also be used to look at resource loading times, debug JavaScript, and as I posted a whole lot more than I’ve ever tried. Give the dev tools some of your time and I think you will be as impressed as I am with what can be done.
’ totally agree and believe a new sticky Topic could be raised to help Noobies benefit by sharing how to learn the intricacies of this powerful tool - which is also available in all the popular browsers.
Mitti, Thanks for this Intel. FYI, I went to Chrome/Inspect for this SitePoint page we are on, and after 30 Minutes of looking at it just gave up
It is going to take much time to figure it out, which time I dont have now. But ASAP I need to delv into this as you noted.
Thanks again.