Hello, we are back. Before we continue our class, we create a web app like apps like Twitter. Let us go back to styling because the text error doesn't look that great. The button neither. Neither does the button. Let's go back to a little bit of style before continuing. One way of getting started with styling things is using the dev tool in the browser. We already learned how to use that a little bit. Now let's say I want a style, say the button right here. The button, I want to make it better. Well you can right click the button like inspect. We will open that too, if it's not already open. And it's going to highlight it for you and it gives you all the styles on the right hand side panel here. Style tab. Now the bottom by default, the browser gives some default styles. You can see it's surrounded by a border. There's some little bit of padding. And there's this color like grayish and it's all in the default style. We don't want defaults, so we can define our own styles. So we can start by using this element.style part. You can click here and start adding properties in real time and see what it looks like. Let's give it a try. Go to the button, maybe click in. Let's play around with the border. The border right now, let's put one px, solid black. Let's start out with this. My first tab. Okay. Do you like the thickness of the border? It's one px, so I can increase. It's up to you. It's kind of highlighted, that's why I changed the color. Let me take the mouse out of it so we can see it's color black. You can choose the border that you want. I'll leave it to you. You can choose the color as well. One very nice thing you can do through the app tools is you can see there's a color picker. If I click here and it shows me all the colors I can pick, these properties. Now the first property is the red, green, blue that you can choose. And it gives you the hexadecimal value. Notice that I started with the word black. You can use words for the colors or you can use what's called the hex value. The hex value is a sixth alphanumeric code that corresponds to the color. The first two is for red followed by the next two for green, followed by the next two for blue, so R, G, V. You notice as I change the colors the values change. For example, you have red, red, red. You can see the red is FF with all the others 0, 0 because that makes sense. R, red, G for green, blue, B for blue. There's no blue, there's no green, there's only R, red. Anyway, the second thing here is the alpha. It's the transparency. You want it 100% transparent or you want opaque. You can choose that and that adds a new set to the X at the end of the hex. Another notation is the RGBA notation. In this case, it is using numbers from 0 to 255 for each. For example, red is 255, 0, 0, no green, no blue. And the alpha or transparency is one meaning opaque, 0 for transparent and in between is a little bit seen through. It's a value from 0 to 1. I'll leave it opaque. For the red, the highest 255 is the reddest. If you put 0, it's going to go to color white. Oh, sorry. White is all colors, all are black. And if you put 255 for every single thing, that's the maximum, that's the white, all colors. Anyway, I can just leave any color you want. Maybe this blue, about that one. Nice, but I don't like the border, how it's not rounded. So I can add border radius. Oops, border dash radius adds the round. It starts with one pixel. And it can increase. You can see the border becomes rounded as you increase. Of course, there's a limit, but let's do two, maybe. 2px. Four, four looks nice. It's four then. Nice. I don't like the background. Can we make it better? Maybe, how about this background color? Background dash color. Let's start with yellow. You can choose the color you want from the background. And it changes accordingly as you like here. What do you think? Anyone you want. Maybe lighter. Anyway, I'll leave it like that. Not very nice, but. Let's add some padding to the sides. I want to use padding, but I want to split the padding individually for the vertical and horizontal. Vertically, I want to want 1px, horizontal and 1px. I see compare. Let's see what happens when I increase the first value. It's the vertical, right? Top and bottom. Top and bottom, I think. Maybe four. From the left and right, I want to increase more. Maybe eight or even better. How about that? I can also make the text bold with font size. Font dash size. You can use the letter, the words, but I like using numbers. So I can use 400. Then you go to 500. Then you go to 600. I meant font weight, sorry. Not font size. Font size will be the size of 12 pixels. Let me show you. This is the size. You can increase so on. But I don't really, maybe I want to, let's say 14 pixels. Now for the bold, sorry about, I meant font weight. Okay, font weight would be how bold you want it to be. I can start at 400. It doesn't make a difference. 500. 600 is the way and it becomes really bold. You can see the difference. You can even change the color of the text with color. Well, that certainly doesn't look good, right? I can click and change. Maybe. Who would be nice? There you go. Anyway, blue is. So we got all these styles, but remember this is. Just in real time, remember it will go away if you reload. So be careful. Don't lose the styles. Copy them. Copy. We'll see for command. Go back to your style sheets, styles.css. Now I need a class for the button. So for every element in the page, we need to apply different classes, right? You have a button to create a class for the button. You have an inch or created class for the inch. You have a text error, created class for the text error. So every individual different kind of widget or control element has its own class. So let the final new class here outside. I'll call it. Maybe you want to call it. Entry sub bit, but just like the ID. You can have the ID the same as the class name, but there are different concepts, different things. Anyway, or even better, I could actually, I don't even need a. Actually, you could target. That element by ID. If you use the pound is going to target the element ID like this, the class, but that's not very good because you could have multiple buttons on the page. And maybe those buttons share the same style. But the ID is only one. You can only have one one ID ID is unique. So usually for things like widgets on the page controls, you always use class because class you can have them. Apply to multiple things. You can have multiple of them appear in the page. So if the thing is really unique, of course, can always end up with ID. But I think it might be we can maybe in the future have money, different buttons that might have the same consistent style. So I'm going to make a little class. Copy and paste, fix my notation here. If you want to organize by. Fatically, that's fine. Up to. Oops. Okay, so we need to apply this class to the entry button. So go to index.html to the button you're going to add a new attribute. You can put it out before after the idea doesn't really matter. I'll put after class. And here no dot here. That's reload. Now it's persistent. There's now this class here. Okay, one other thing is like, usually when you hover over the button, there's a class. So you can see that the class is here. So you can see that the class is here. So you can see that the class is here. So you can see that the class is here. Okay, one other thing is like, usually when you hover over the button, there's a change of the cursor. Maybe you want to put your cursor pointer in a change. You see when I hover over the button, it changes to this pointy finger. Of course, there are other ones like the cross hairs. This one is the guy you're going to like your crosshair in the button depends on what you like. The standard is usually the cursor pointer. So I can add that in his finger. So let's add that to our dial. I'll just see an SS right here. And reload and it'll be out of there. Okay, so that's the style for the button and we learned how to do in real time here and don't forget to copy and paste. I think I'm going to take a break for now and I'll see you in the next video.