There are tons of CSS properties that we can't remember, and sometime we write some CSS and didn't know why it doesn't work as we expect?
It turns out we used the wrong CSS property. How to know what exactly point we are wrong? Let's move on next step to discover that tool.
Prepare
First of all, I need to create a file HTML and a file CSS for this demo.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Debug CSS</title>
<!-- import css file here -->
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="hello">Hello! CSS!</div>
</body>
</html>
styles.css:
.hello {
}
I'm ready! Let's move on next step!
Demo
I'm going to use Firefox, in order to figure out what CSS I'm wrong.
In Firefox, I can hit Style Editor, and I can see the style.css file that I just created. Let's edit the CSS directly here.
As you can see, CSS was reflected immediately.
Hit inspector, and look at the right side, if I add the CSS below to class hello. Firefox will show me what CSS I was wrong in a specific way. The wrong CSS will be gray, and there is i icon that we can hover and see the reason.
display: inline;
/* we can't set width for an inline element */
width: 100px;
This is the error:
It told me that I can't set width for an element that has display: inline.
Let's try another property maybe we can test.
display: inline;
/* we can't set width for an inline element */
width: 100px;
align-items: center;
And I get an error:
Conclusion
I just introduced how to debug in CSS using Firefox. Why don't try your CSS, and observe what message Firefox will give, it appears like magic.
Top comments (1)
good good thank you!