Summary of CSS Property Usage and DevTools

Now you might be asking, okay, how do I know what CSS property to use? So there are several ways you can find out. One way is simply going and doing a search. For example, how to align the CSS in your favorite search engine. And then you can find out, okay, let's look at this. And you can figure out how, okay, they use text align here. So that's the property. Another way is using DevTools. So every browser has what's called the developer tools, in short DevTools. To open that's usually the key F12 in your keyboard. If you press F12, it will open up. If you don't know where F12 is, another way is you can right click anywhere in the browser. It should also like inspect. And it should also bring up the DevTools. Now you want to be in the elements tab or inspector. I'm using Firefox. That's why it's a little bit different from Chrome based browsers. And you can highlight the elements here. Let me make it a little bit. You can change the size here. Resize the panel so I can better see. So in this left hand side, I can see the whole document structure in HTML. And then can highlight or click the paragraph, the element I'm working on. On the right hand side, I will see under styles or rules in Firefox. That's the CSS I wrote is now here. You can see color red, background color black and text align center. So what's nice about DevTools is I can change this property in real time and see what it looks like right away. For example, what does it look like if I change the color of the paragraph? I can click this color and I can choose from the color palette here. Let's say I like white better. Oh, that looks better, a lot better. And then once you're satisfied with that, make sure to change your original code because just changing the DevTools does not actually change the document, the original thing. So make sure to always go back. Okay, I want to change the white here. All right. Now as I was saying, how to find out the property. So if you want to try out different properties, you can always go here. See this, what's where it says element. You can click there between the opening and closing and start typing properties to see if there's anything related. It will give you some suggestions. For example, I don't know how to align text. Maybe I'll search for align or maybe it's text something. Oh, text align. So there are many text dash properties. That's usually about the text. So okay, text align, that's the one. I press tab in your keyboard, tab. Now it asks for a value. So you can select from these values. That's how you find out what values are available. For example, center is right at the first, so I can choose that. Or I can choose end. What happens if I choose end? Oh, it aligns to the right. Okay, so I can go here and keep choosing. You see, as I press my keyboard down arrow, I can see how it changes for every property. Okay. So I can always do also the following. I can click this checkbox to see what it looks like without this property and with that property. Okay. And if you notice, this is the same property I had written. So that's, it's overriding what I wrote here. So you can see the strike through. So without is the original and then with that is like that. Now let me see some questions. Someone said, I clicked on F12 and nothing showed up. Somebody says plus F in F12. Yeah, so that depends on what computer you have, usually desktop, or if you're using external keyboard, there's the F12 key. You can just press it. If you're using laptop keyboard, you usually have to hold the key F in and then press F12. And I don't know if Max, you have the same, I think it might have the same thing. You have to press FN. Yeah, like I said, if you cannot figure that out, you can always right click anywhere in the browser. Let me show you again, right click anywhere, click inspect. And that will also bring out the dev tools. By the way, this inspect is useful because, okay, let's say I want to inspect this paragraph and see what's going on with its styles. I can right click that specific element and click inspect. And it will select it for me right here automatically. So I can see on the right hand side the styles. Okay, so that's the dev tools. Anybody have any more questions? Can you go to a particular line, like a debugger? Like, okay, to just stop on a line that's causing a problem. Are you talking about JavaScript or? Yeah, basically. Yeah. So we're doing CSS. We're not doing JavaScript today. But yeah, you can do it with JavaScript if you open the dev tools. Is there a debugger or whatever? You know, for how to debug using Google Chrome or I guess I'll Google that. Can you say it again? I was wondering if there's a good tutorial for debugging using Google Chrome. And I said, I guess I can Google that. That depends on what you're debugging, right? So is it HTML, is it CSS, is it JavaScript? So every case is kind of a little bit different. So, but I showed you how can debug CSS. Simply you go to the element you want to find out about, right click, inspect. And you can see it's highlighted here. And you can see on the right hand side it's properties. So if you're having trouble, maybe, okay, I want to center this, but I don't know how. Or maybe it's wrong. It should be centered. So you can inspect here and see, oh, okay, there's no text-aligned center here. That's why it's not centered. So if I have that here or type it here, it will make it centered. That's the way we go about debugging CSS in real time. Okay. Any more questions? All right. Mina's as sad when I inspect, I don't find the inspector. What do you mean? When you inspect, you should see the dev tools open up in the bottom or right or whatever you're aligned. By the way, you can change, if you click here, there's a way you can dock to the right. Or you can to the left or whatever. There should be an icon there. So you can change where the dev tool goes. All right. Thank you so much. It's just for some reason, I can only see elements, console, sources. Yeah, yeah. It's the same thing. So if you're using Firefox, that's why it says inspector in the tab. For you, if you use Chrome base, it should say elements. Oh, my bad. All right. I appreciate it. Thank you. So as long as you see all the document structure and you can highlight them, it's the same thing. And the right hand side, you should see the styles. Okay. If you're using right hand, right aligned dev tools, it's probably at the bottom, the style thing. So that depends on how you like the things. Anyway, let's keep going. I'll close the dev tools for now.