Welcome back to one more lesson. Let's keep building our web application. Let's do a little bit more of styling. If you remember the wireframe that I had presented you in the very first lesson about the web app, how it is going to look like, how it is going to behave. The text area at the top, it had the right button right under that but aligned on the right hand side of the content area. Right now the right button is aligned at the left. So let's change the alignment. So if you go back to the browser here, you can right click the button and inspect. And we have this very convenient area under the element tab where you can see the document object model. So you have the button here. Notice the button is enclosed in this div. This div is the container for that button. So there is a very easy way to if you want to align something inside of any kind of container, in this case the div. And that's using the text align property. If you try it out, go here under the styles tab, click here under the element dot style and let's write text dash align. I'm going to press tab, now I can select the value for this property. Notice in the drop down list there are many values this property can take. You can try it out and select one of them and see in real time what it looks like. For example, if I try out center, you can see now the button. It's center about the div it's contained. So the div occupies the whole line from right to left of the content area. Now the button is centered. You can also use right. That's what we want. Now the button is aligned at the right hand side of that div. So let's copy this and let's apply it to the container div. Now the container div doesn't have any class applied to it. So we are going to have to create a new class and apply that class to the container div. So back to the styles.css file. I am going to create a new class. If you want to target a class, you start with a dot and then you type the class name. Let's call this the entry submit-button-container. And I am going to paste the style we had defined. And then to the div that contains the button, I am going to add an attribute class equals open double quotes in between the double quotes. I am going to type the name of the class. We have just declared on the other file. Enter submit-button-container. Now the style associated with this class is going to be applied to the div on line 11 in index.html. Well I chose this name based on what was inside but if in the future we think that this container is going to have more stuff, more elements, not only the submit-button, maybe you had other actions you could take. It's probably a good idea to choose a different name for this class. Maybe you want to say it's the text area actions container. Something like that. In any case, let's go on. So that's great. The button I can refresh the browser and it now appears a class here and I can click it. Oh, something happened. Did I save all the files? I did not save my style.css. That's why it did not appear. I saved the file and I refresh and now the button is aligned at the right hand side. Let's do something about the text area. Now the text area right now is kind of too short in the width and it doesn't look that great. How about we inspect the text area and let's do something about it. How about the text area take the width of the whole line? To do that we can use the width property. Now the width property can start with a pixel value. That's totally fine and it can increase the size of your liking for the width of the text area. But doing it like this means you're using a fixed size. So notice how I, if I want to increase the width of my content area or if I want to squeeze it and decrease the size of the text area remains the same. And sometimes that's not what we want. Sometimes you want the element to adjust its size based on the current width of the screen. So what if we told the text area, hey please take up the whole width of the content area no matter what width it is. Now to do that you can use percentage values. For example I can use 100% and it's just saying please have this element occupy 100% of the width of its containing container. In this case it's under the body so it's going to occupy 100% of the width from left to right under that body. That container, okay. So that is great. Now notice how if I increase the width of my screen the width of the text area adjusts accordingly. And if I decrease the width it does the same. So that's nice. One thing to consider though is if you increase the width too much your website might not look that great. So that's a topic for another lesson that we could tackle but for the time being we're not going to be concerned with optimizations for larger screen sizes. But I'll give you an idea of what you could do. In those cases since the size is too wide we usually add space at the right and the left of this whole content area. So we squeeze them towards the center and make it smaller and better for users to see. So we could achieve that say using a media query depending on the width the content area is taking at the current moment. In any case let's keep going. So how about we add a margin to the bottom of the area with the right button because the button is kind of too close to the very first entry of the list. So let's go to the div that contains the button and we can easily add. You can either put an element style or under the class here to see what it looks like and we'll matter. Margin dash bottom as search one px and increase to your liking. I think 12 is the one that we use for the space between each entry in the list. I'll use that as well to be consistent. Now of course I can see it right now in action but if I reload the page this will all be gone right reload. Oh it's gone. So be careful that. So if you try it out in the. Dev tools always make sure to copy and paste it into your style sheet. And there is styles that CSS now has the margin butter for the initial met button container. And I forgot to. Target the. Oh yeah I forgot to copy the style for the div. So that's one big mistake that I made right I warned you about it and I just did it. I lost the style for the way of the text area. So be very careful. Don't forget to copy and paste into your style sheet as you're working with the Dev tools. In any case let's add the style in our source code for the text area to take the way of 100%. Now notice the text area does not have any class. We could add a new class to the sex area and in the class we add the way of 100%. That's usually the best way to go. You could also target the class this element by ID and style based on the ID that the element has in this case text area has the ID to your entry area. That's totally fine. But the thing is you most of the times you want to use class because the class can be reused and IDs are unique. Why IDs are unique. So the ID can only be associated with one element at a time you're going to have the same ID for multiple elements. So that's why you want to always use class because you can reuse the class the style that class for multiple elements. But just for this case I'm going to teach you how to target the element by ID and apply the class. Not the class. Apply the style to that element. Notice text area has the ID and entry text area so we can go to the style sheet. Style.css and to tell the style sheet please target the element whose ID is that you can say pound and the name of the ID. In this case new-entry-text-area. And you declare the styles the same way we did before. Open the curly brace and close the curly brace in between. You say the width, whole 100% or any more extra styles. So this is starting the element whose ID is new-entry-text-area. Now it's working just fine. First there's always something we can do better. Always something we can improve regarding the style of the application. You could do a lot of things for text area and many other elements in the page. Maybe you want to add some more padding so that the text that you type has some space between the text content and the border. You can add a margin at the bottom to increase the spacing between the text area and the following element under it. But I'll leave that to you. For now let's take a break from doing those styles and let's move on. I'll see you in the next class.