Learning to debug is an essential skill to pick up early on. There are many debugging techniques; here are a couple you’ll need to use all the time in debugging your HTML & CSS.
Here's a really powerful trick I want to show you for learning and debugging CSS and HTML. You can do this in almost any web browser, but I'll just give instruction for Chrome. Now, right-click anywhere on the Learn How to Program homepage and click Inspect. A little window will pop open that shows you the source code for the page, with the element you inspected selected. As a shortcut, you can open it with Cmd + Option + I.
On the left side of the DevTools, you can select a different element, and expand or collapse all of the elements on the page to make it easier to see the layout. On the right side, the inspector shows you the CSS for the current element. One of the really cool things about this is that it shows you all of the different rules that have been applied to the current element, including those that have been overridden due to specificity or order. You can also uncheck a rule to disable it, or double-click a rule to edit it and see the change live. You can even add your own rules to see what they will do live.
Try inspecting elements on this page to see what CSS rules are being applied.
DevTools or Developer Tools: An area of the Google Chrome web browser that offers debugging options, and other tools helpful to web developers to assist in locating problems, measuring performance, etc.
Inspecting an element: The act of looking at the code for a specific element on the page.
How to inspect an element: Right click on an element of a web page, and select "Inspect" from the resulting menu of options.