Custom styles not being applied / Diagnosing CSS issues

• One of the easiest and most effective ways to diagnose and identify CSS issues is to use either the Internet Explorer Developer Tools (IE8 or higher), Mozilla Firefox browser Developer Tools or the built-in Developer Tools in Google Chrome. Those tools allow you to inspect in detail the generated HTML and identify which style rules are contributing to the layout and style of a given part of the page.

More information on the various browser tools can be found here:

• Chrome: https://developers.google.com/chrome-developer-tools/
• Firefox: https://developer.mozilla.org/en-US/docs/Tools
• Edge: https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide 
• Internet Explorer: http://msdn.microsoft.com/en-us/library/gg699337(v=vs.85).aspx
• Opera: https://help.opera.com/en/presto/advanced-features/#dragonfly 
• Safari: https://developer.apple.com/technologies/safari/developer-tools.html

Using the Developer Tools in Google Chrome

Google Chrome can be downloaded here: www.google.com/chrome

Build the output you would like to inspect. Once built, open the Browser Help output in Chrome.

• Within the Table of Contents navigate to a Topic you would like to inspect the CSS or HTML for.
• Press (F12) or (Ctrl+Shift+I) to open the Developer Tools.
• The strip of buttons at the top of the Developer Tools pane allows you to inspect various aspects of the page.
• Click on the Elements tab to show the element hierarchy.
• Click on the 'arrow pointing the square' icon on the strip right next to the Elements tab of the Developer Tools pane - this activates Inspect mode.
• Move your mouse over the page and click an element you are interested in looking at more closely.
• The Developer Tools will now show, down the right-hand edge of the Developer Tools pane, the various style rules that are being applied to that element (example below)

Using Developer Tools in Mozilla Firefox

Firefox can be downloaded here: Mozilla 

Build the output you would like to inspect. Once built, open the pure HTML output in Firefox.

• Within the Table of Contents navigate to a Topic you would like to inspect the CSS or HTML for.
• Press (F12) or using the Tools menu select Web developer>Toggle Tools.
• Click on the Inspector tab to show the element hierarchy.
• Click on the 'arrow pointing the square' icon on the strip right next to the Inspector tab of the Developer Tools pane - this activates Inspect mode.
• Move your mouse over the page and click an element you are interested in looking at more closely.
• The Developer Tools will now show, down the right-hand edge of the Developer Tools pane, the various style rules that are being applied to that element (example below)

Using the Developer Tools in Microsoft Edge

Build the output you would like to inspect. Once built, open the pure HTML output in Internet Explorer.

• Within the Table of Contents navigate to a Topic you would like to inspect the CSS or HTML for.
• Press (F12) to open the Developer Tools window.
• Click the 'arrow pointing a square' icon button to start Inspect mode.
• Click on the element that you want to inspect.
• The developer tools will highlight the element you clicked in the element hierarchy and will show the style rules that are in effect for that element on the right-hand side (example below).

Using the Developer Tools in Internet Explorer

Build the output you would like to inspect. Once built, open the pure HTML output in Internet Explorer.

• Within the Table of Contents navigate to a Topic you would like to inspect the CSS or HTML for.
• Press (F12) to open the Developer Tools window.
• Click the 'arrow pointing a square' icon button to start Inspect mode.
• Click on the element that you want to inspect.
• The developer tools will highlight the element you clicked in the element hierarchy and will show the style rules that are in effect for that element on the right-hand side (example below).