Use browser tools

To simplify work with HTML and CSS, various browsers offer Web developer tools. Use the following shortcut to access the Web developer tools in most browsers (Chrome, Firefox, Edge):

• Crtl+Shift+C

You don’t see the developer tools? The Web developer tools are integrated in the latest browser versions by default. You will need to update your browser or manually install an extension (Web Developer extension for Firefox, for example) if you are using an older browser version and the Ctrl+Shift+C shortcut does not open the Web developer tools.

The following description is based on Web Developer for Firefox, but it applies to all other browsers.

Step by step

To use the Web developer tools for designing dynamic Web pages, proceed as follows:

1. Open your Web browser.

2. Use Crtl+Shift+C to open the Web developer tools extension.

   The Web developer tools will open in a sidebar window of your browser or in a separate window, depending on your default settings. You can adjust the position at any time.

3. Click the Inspect tool to select a particular area on the Web page. The corresponding HTML code is shown on the left, the CSS code on the right.

   CSS entries that have already been defined are displayed on the right under Styles.

   

   In this example, there are, as yet, no explicit entries for the area, so that the CSS instructions for the enclosing ‘body’ element are output.

4. Now you can enter CSS code directly in Firebug and test the behaviour in the browser live. Click the ‘+’ symbol on the top right to edit the selected element.

   A new CSS selector will be created for the selected element: .submit_login.

   

5. Click the selector you just created (.submit_login) to design the selected element.

   After entering the first letter, you immediately get suggestions for possible CSS instructions, such as background-color for the background colour of the ‘Send’ button.

   

6. Press the tabulator key to enter the desired colour value as a hexadecimal code.

   

   Design your element according to your requirements.

   

   Changes are temporary: Up to that point, the entry exists only temporarily in your browser and is automatically removed as soon as you refresh the page.

7. To use the code for your page, copy the code and enter it in your style file.

• You have optimised the style of your dynamic Web page using browser tools and adopted the changes in your style file.