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:
-
Open your Web browser.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
Inxmail Professional:
2 possible use cases
Depending on your contract, you might use Inxmail Professional in different ways:
Learn more
-
As part of the Inxmail platform: You use newsletters & campaigns as your main tool for creating and sending newsletters. Inxmail Professional only serves as a recipient database and configuration tool in the background.
We are constantly expanding the functionality of “Newsletters & Campaigns”. Check out newsletters & campaigns section to find out if the feature you are looking for might already be available there.
-
Full scope: You use the legacy tool Inxmail Professional as your main tool for creating and sending newsletters.
Did you not find what you were looking for?
-
Send us your feedback.
