Understanding how to debug CSS is important because sometimes CSS does not give the results as you expect.
- Selectors dosnot match the element as you expect
- Layout is not working as you expect
- Sizing of the elements is not working as you expect
To get rid of the above issue you can debug the CSS using DevTools of the browser.
How to open Browser’s Dev Tool
To open DevTool in your browser, right-click and select “Inspect element” from the menu.
Following shortcuts can be used to open DevTool
- Chrome: ⌥ + ⌘ + I on a Mac, and Ctrl + Shift + I on Windows
- Firefox: ⌥ + ⌘ + C on a Mac, and Ctrl + Shift + I on Windows
- Safari: ⌥+⌘+I
- Edge: ⌥ + ⌘ + I on a Mac, and Ctrl + Shift + I on Windows