📖 Deeper dive reading: MDN Debugging CSS
CSS is extremely powerful, but sometimes is can be very frustrating to figure out why your page is not rendering the way that you expect. To help you understand why things are rendering the way they are you can use the browser's developer tool to inspect the CSS properties and visualize the HTML layout. Using the Google Chrome debugger you can access the developer tools by right clicking on the HTML page element that you want to debug and selecting the inspect option. You can experience this by creating a directory that contains the following content, composed of an HTML file (index.html) and a CSS file (index.css). This simple example has one paragraph of text and uses flex to center the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<p>Center text in centered element</p>
</body>
</html>* {
border: thick solid blue;
box-sizing: border-box;
padding: 0.2em;
font-size: 24px;
font-family: Arial;
}
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;
}
p {
width: 50%;
height: 50%;
display: flex;
align-items: center;
text-align: center;
}Open the directory with VS Code and use the Live Server extension to view the HTML in the Chrome browser. In the browser, right click on the text and select inspect. This will open the debugger window and display the Elements tab. As you move your cursor over the different elements you will visually see what the padding, borders, and margins are set to. The Styles pane shows all of the CSS properties applied to the currently selected element. If you scroll down to the bottom of the styles pane you will see the CSS box. By moving the cursor over the different parts of the CSS box it will highlight the different box parts in the browser window.
You can change any of the CSS properties, and even add new properties, directly in the debugger. This allows you to see what each property is contributing and change them to see how that impacts the rendering. This is a great way to figure out what CSS works best without having to continually change the CSS file and refresh the browser.
This example has a small problem. Each element has with a blue border and some padding. But the body element does not render any padding at the bottom. Inspecting the body element and looking at the CSS box reveals that the default margin for the elements is pushing the body element down so that the padding overflows into its parent element. We can fix this by setting the margin for elements to be zero.
Now, notice that if you resize the browser so that it is wider, the centered text will appear left justified.
See if you can figure out what the problem is, and then correct the CSS so that the text always appears centered in the box.
Experiment with debugging and altering the CSS. Note that you can open up any website and use the debugger to see how they implemented their design and even do temporary alterations to the CSS properties to see how that impacts the display. Debugging other people's code is a great way to learn how to improve your CSS skills.
If you get stuck consider the difference between text-align and justify-content.
This video shows you how to use the "inspect" tool to debug your CSS.