Current filter:
                                You should refresh the page.
                                  • Description:
                                    What should I do to determine which CSS rule is applied to the HTML element?

                                    Answer:
                                    Edge

                                    1. Execute Developer Toolbar by pressing the F12 key on your keyboard;
                                    2. The Developer Tools window will be displayed;

                                    3. Click the Select element button;

                                    4. Click an element on the page;

                                    5. A corresponding HTML element will be selected in the DOM Explorer window;

                                    6. Now we know that the CSS rule with the “testRule” name is applied to the element;
                                    7. Find this rule in the Style window as shown below:

                                    Internet explorer

                                    Check whether the Developer Toolbar is installed on your machine. If you are using IE8+, this tool is already integrated in your browser. Otherwise, you need to install it manually. If the Developer Tool is installed, perform the following steps:

                                    1. Execute Developer Toolbar by pressing the F12 key on your keyboard. Alternatively, click the Tools -> F12 Developer tools menu as shown below.

                                    2. The Developer Tools window will be displayed;

                                    3. Click the Select element button;

                                    4. Click an element on the page;

                                    5. A corresponding HTML element will be selected in the HTML window;

                                    6. Now we know that the CSS rule with the “testRule” name is applied to the element;
                                    7. Find this rule in the Style window as shown below:

                                    Firefox
                                    The Firebug add-on is used for this purpose. Check whether this tool is installed on your machine and perform the following steps:
                                    8. Execute Firebug by pressing the F12 key on your keyboard. Alternatively, click the Tools -> Web Developer -> Firebug -> Open Firebug menu as shown below.

                                    9. The Firebug window will be displayed;

                                    10. Click the button that is shown below to inspect a corresponding element;

                                    11. Click the element on the page;

                                    12. A corresponding HTML element will be selected in the HTML window;

                                    13. Determine the rule name as shown above;
                                    14. Find this rule in the Style window as shown below:

                                    Chrome
                                    Use Developer Tools to accomplish this task.
                                    15. Execute Developer Tools by pressing the F12 key on your keyboard. Alternatively, click the Menu -> Tools -> Developer tools menu as shown below.


                                    2. The Developer Tools window will be displayed;

                                    3. Click the button that is shown below to inspect a corresponding element;

                                    4. Click the element on the page;

                                    5. A corresponding HTML element will be selected in the HTML window;

                                    6. Determine the rule name as shown above;
                                    7. Find this rule in the Style window as shown below:

                                    Opera
                                    Use the Opera Dragonfly tool.

                                    1. Execute the Opera Dragonfly tool by pressing the Ctrl+Shift+I key combination on your keyboard. Alternatively, click the Menu -> Page -> Developer Tools -> Opera Dragonfly menu as shown below.


                                    2. The Opera Dragonfly tool window will be displayed;


                                    3. Check whether the following buttons are pressed as shown below:


                                    4. Click the element on the page;


                                    5. A corresponding HTML element will be selected in the HTML window;


                                    6. Determine the rule name as shown above;

                                    7. Find this rule in the Style window as shown below:

                                    Safari

                                    8. Click the Safari settings -> Preferences... menu as shown below.


                                    9. In the Settings window click the Advanced tab and enable the Show Develop menu in menu bar option as shown below.


                                    10. Close the Settings window and click the Menu for current page -> Develop -> Show Web Inspector menu.

                                    The remaining steps are the same as for Google Chrome.
                                    See also:
                                    CSS Tutorial
                                    Enabling firebug
                                    Chrome Developer tools
                                    Opera Dragonfly
                                    How to enable script debugging
                                    How to implement CSS-related solutions for DevExpress components

                                0 Solutions

                                Creation Date Importance Sort by