i

Learn HTML and CSS in 10 Days

Developer Tools

Most of the browsers that you use come with Developer Tools. This tool helps in inspecting a web page. You can easily have a check about the elements present in the HTML document as well as can get accustomed to their CSS properties. Most of these tools also give the box model view of the webpage.

If you are looking for Developer Tools in Chrome then:-

1. Click on “View” within the menu bar.

2. Navigate to “Developer”

3. Then go to “Developer Tools’

The bottom of the browser windows gets loaded up with several tools for the checking of the code.

As soon as you choose an element here, you will be noticing several tabs on the right side of the Elements panel within the developer tools. Select the "Computed Tab" to have a look at the breakdown of the selected element in the box model.

So play around with these developer tools in Apple Safari, Mozilla Firefox, Google Chrome, and in other browsers.