 Oh no. CSS is hard. Our UX designer passed me this card design, but what I've got so far is this. It doesn't look pretty at all. This is me fixing the CSS all day. I really need some help to debug and fix this. Hello everybody! I will be your CSS hero today. Let's fix this together. Can you show me your code so far? Yes! Here, I have a section container and a div card. Inside the card, I have an image and a hyperlink. These are my CSS so far. Let's start with the hyperlink. Our designer asked me to use UnicornPink for the text, and I did. Why isn't that reflected on my page? UnicornPink? I'm not sure if CSS supports that color. Let's find out with DevTools. Right-click Inspect the element and take a look at the styles pane. It shows you all the styles applied or not to the element. CSS with invalid syntax are crossed out and have a warning icon next to them. Hover over the icon to get a tip on where the typo is and the property name or in its value. In our case, it's the value. Unfortunately, there's no UnicornPink in CSS. Perhaps we can propose one, but let's change it to DeepPink for now. Look, now the warning sign is gone. Nice! Wait, why is my Rebecca Pepper crossed out in the styles pane? Does that mean this color doesn't exist? No, no, no, no. As you know, some properties may override others according to the cascading order. Overwritten properties are crossed out too, but they don't have warning icons next to them, because that's just how the cascade works. In your case, Rebecca Purple is totally valid, but the DeepPink wins because its selector has higher specificity than that on the headline element. If you change your mind, you can uncheck the color to test it. I would suggest that you move the color definition to the headline. I see. Alright. Now, how can I move the text to the bottom and center it? Look, I have set the width to 100% and aligned the text to the center, but it just doesn't work. Hold on. Some CSS rules may be totally valid, but they are inactive because of how CSS works. Your code here is a perfect example. In our case, Hyperlink has a display inline value by default, so setting width has no effect on this element. DevTools grays out inactive CSS and shows information icons next to them. Hover over the icon to get a tip on why it is inactive. You can open the computed pane and see the final CSS values that Chrome uses to render an element. If you filter by display, you can see that the rendered value is inline. This is just how CSS works. Now, go back to the hint. It suggests we change the display value. Let's change that to block. See? It works now. Cool. I saw there are other properties grayed out but without an icon. Why is that so? Right. Here's another fact about CSS. Some properties are inherited. Some are not. The styles pane shows all inherited or not properties in the corresponding sections. Grayed out properties here are still active just on the parent. What the styles pane shows on this element is default inheritance. Properties in regular text are inherited and the grayed out ones not inherited by default but present on the parent. Right. By the way, I use shorthand properties quite often. How can I debug them? Good question. Indeed, I always forget the order of padding side values when I set two values in one declaration. You can expand shorthand properties. The styles pane will show you a list of all the properties that are implied. The expanded properties will follow the same display rules of the styles pane so you can spot overridden rules at once. In our case, the padding top property is overridden by the rule on the headline element. Ah, I see. Oh, I also noticed that I can't edit some properties in the styles pane. Why is that so? Well, you shouldn't be able to edit that. You can't edit the user-Asian style sheet, Chrome's default style sheet. The styles pane shows these non-editable properties in italics. Also, you can't edit certain HTML attributes like width and height. That's because these attributes aren't in a CSS style sheet. They're part of the HTML itself. But you can still change such attributes in the DOM tree. Wow. There is so much to keep track of when using the styles pane. Yeah, it can be overwhelming, but fear not. Here are two tips to help you stay focused. First, you can use the filter in the styles pane to focus only on the one property that you're interested in. For example, if you filter for border on this element, you'll see all the long-hanged properties at a glance. Second, if you're still not sure why your CSS doesn't work the way you think it should, use the computed pane to see all the cascade winners and their computed values. For example, the exact value of width in pixels and not in viewport units. You can expand properties to see their actual values and find their source. Alright, we are almost there. How can I make the image align in the center as well? There are many ways to do it. Let's try the CSS grid for this one. On the card, add the display grid rule and open the editor. You can play with the option here and justify the items to center. Watch the grid debugging DevTools tips to find out more. Yay! I can finally submit a PR for this! One last question, Sofia. I noticed some CSS selectors are grayed out. What does that mean? Ah, that's a nice little indicator for unmatched selectors. For example, we have multiple selectors for this CSS declaration. The one that actually matches is the card selector. Therefore, DevTools grayed out the thumbnail. Nice! Thanks, Sofia. Where can we learn more about debugging CSS issues? You can go to good.go.devtools-css-issues to learn more. That's all. Good luck learning CSS, everyone. See you for the next DevTools tips. Ciao!