Geodesic Solutions Community Wiki

There are several tools available in your browser that allows you to find the CSS that affects a specific html element. The quickest to find are the "inspector" tools built into the Firefox and Chrome browsers. All you need do is right click on the html element you want to find the css for and then select "inspector" from the right click popup. That should open another larger popup with information on the element you right clicked on. From within that next popup you can check and uncheck current css elements to see their affect in the page as well as temporarily add you own css to see that affect. Learn to use this tool as it can become invaluable. Many times you need to click a few elements to find the one that affects the css you want but this is probably the biggest time saving tool of the browser we use.

Another tool we find useful in finding CSS is the Firebug plugin for the Firefox browser (Both the browser and the plugin are free). Google Chrome has a similar feature "built in" called the developer console, as does Internet Explorer, but we found ourselves using Firebug most. There may be other plugins as well for other browsers, but we are not familiar with but doesn't make them as useful. If you know of any please let us know; we would love to list them so everyone can use them.

The Chrome browser has a built in page inspection tool that can help with many aspects of html design. We use it all the time to find css that affects a specific element as well as troubleshoot javascript issues:

https://developer.chrome.com/devtools

You can analyze any css within a page of your chrome browser using the built-in inspector tool. This section of the google developers site explains the use of that inspector for editing styles within any page.

http://developers.google.com/chrome-developer-tools/docs/dom-and-styles

Google even created some instructional videos on how to use the tool:

http://discover-devtools.codeschool.com/

The first couple videos in chapter 1 tell you what you need to find the css you need.

Another great tool that chrome provides is a tool to emulate different mobile views quickly to see how your site looks in other devices. This helps greatly when manipulating css for different views:

https://developer.chrome.com/devtools/docs/device-mode

You of course need to install the Firefox browser found at http://mozilla.org. Once you have the Firefox browser installed click the tools dropdown in top of the browser window and click the addons selection. This should open the addons popup. Click the Get Add-ons selection at top. Then click the browse add-ons selection in the top right of that popup. Clicking that should open the Mozilla.org plugins page. Type firebug into the search and the Firebug add-on should be the first add-on found. You should only need to click the add to Firefox button to install it to your browser. You may need to click a few more times to get it installed. Once the Firebug addon is installed you should see a Firebug button in the bottom right of your Firefox browser.

Now to using this new addon. Find a page in the browser with html/text you want to find which CSS to manipulate for. Make sure Firebug is on by clicking the Firebug button in the bottom right of the browser window. You may need to refresh the page if Firebug wasn't already on so that Firebug can see all things that happen as the page is loading. Re-select any text or html in your browser window if you have to. When the Firebug window is opens at the bottom of the page you can click the CSS selection in that window. Now all CSS that affects your selection will be shown in that window and the files they are referenced from. If you need more specifics about the Firebug addon you will need to consult their website at http://getfirebug.com.

Credit: Note that this video is created by a 3rd party developer (Geomodules), not by Geodesic Solutions. GeoModules is a 3rd party company, not directly associated with Geodesic Solutions.

You can find out more about this addon at http://chrispederick.com/work/web-developer. This extension has the ability to popup a frame within the page your looking at and anything you click within the page will show the css affecting that element as well as the css files that css is found in which can be very helpful letting you know if you are editing the css in the right css file. To start this install the extension from the site mentioned. Restart Firefox. Go to the page you are having problems finding the css for and select "View Style Information" from the "CSS" dropdown in the browser window itself. There should a complete row of tools this extension adds and CSS is only one of them. This should open a frame in the browser. Now click elements you want to find the css for and the css affecting the html you clicked/selected will appear in the frame below. In the newer versions you'll see a "inspect element (Q)" selection if you select and element in the page and right click. That should show directly within the page what to look for.

This tool even allows you edit the css to test changes you want to make and see the effects immediately. Just note that this tool only edits the css the browser has stored within it's cache and your permanent css changes need to happen in the css files of your system.