what are the best practices and tools to debugg css
#Debugging Css
low mica
tall zodiac
There are plenty of useful css stuff in the dev tools that you can use to fix your css. To start, right click on the page you wish to look at and click "inspect". This opens the dev tools for that page
The first tab "Elements" shows you all the html elements on the page in hierarchical order. When you hover your cursor over one of the elements in the list, the corresponding element on the page lights up, making it very easy to tell which element is on the page
Next up, using grid and flex. Any elements that have display: grid or display: flex will have special grid and flex buttons next to their name in the Elements tab. Clicking on a grid button will show you how the grid is laid out, making it very easy to see how the grid is being rendered and where all the child elements are being placed.
To the right of the Elements tab, there are sub-tabs. The Styles sub-tab shows all the styles that are applied to a particular html element.
Any styles with a line through them are ones that have been overridden by another style. For example, the default style of display: block on this div element has been overridden by me applying a style of display: grid
The "computed" sub-tab gives you a breakdown of all the styles currently in effect on the selected html element along with a graphic showing the size, padding, margins and border of that element. Hover your cursor over that graphic and you'll see the main screen light up showing that property. So for example I can see here that this <h1> element has a top and bottom margin of 26.671px and I can see how it effects the rest of the elements on the page.
