 Right, so hey guys and welcome back to another web series tutorial. So in this video, I'm going to be showing you guys how to Style our website. They've been been working on which is a login and register system I'm going to show you how to make it look a bit more appealing towards the audience and make it look similar to real life Login systems. So first of all what you want to do is obviously start your Apache NSQL so that the website can function properly and then after that just Open the link into your browser and open the code at the same time So to add styles to a website, we need to use CSS Which is a cascading style sheet to start that you just go below the Head tag and type in style and you can press enter for the also complete Here what we're specifying is that from this point onwards We're going to specify the style style properties for the website and it's going to be type CSS so first off what we want to do is Move Oops, we're going to move this wage calculator text or header towards the sensor of the screen So that it's a More aligned and we're going to do the same with the form as well. So we're going to start another center tag And we're going to end it right here Okay Now what we're also going to do is As you guys may see right here the buttons look like they've messed up because we've just moved everything to the center So if we take off the PR from here and here And we refresh we have a nice clean Interface for the user to enter username password login and then obviously lastly register What we could do from this point onwards is start styling the Fields for the username and password. So how we're going to do that is by Creating a ID for the Text for the text holders. So first of all you go after inputs type an ID and then give it a name So I'm going to call this username And I'm going to call this password or you see Or we could just say Textfield Because they obviously going to share the same property. So we don't have to have different ones There's that there and now that we have an ID for these two we can reference them through the style sheet The way we reference them is by using a hashtag and we're going to say text field We need curly braces and then inside there it's going to be the properties of the style we want to use So first of all, I'm going to increase the width and height So with it would be around I would say 20 pixels probably a bit less yet. So around 200. Let's say actually 170 should be the job for now And we're going to increase the height at the same time That looks about right. So inside there. We are also going to increase the font size of the text which is displayed Do this font size to around 17 pixels Actually, it's a bit too big. So I'm going to go for 15 Yeah, that should do the job for now If you wanted to you could also change the color of the text which is displaying inside. So by doing font Actually, you don't even have to do fun You just do your color and say whichever color for example if you wanted the color of the text to be red just type in red and It should when we refresh Display red color as the form name. So obviously we don't want to use that. So I'm going to just ignore that for now If you wanted to you could also take off the borders from the username and password text books that by doing border and then saying none By doing this we get rid of the borders obviously and then we can style it by doing a border bottom So we're going to create a bottom border which is going to be solid. It's going to be red in color and it's going to be two pixels and width Okay, so as you guys can see we have the username and password fields ready We're going to capitalize these because it doesn't look good. Otherwise and we can also add a bit of padding so it's far from each other Let's say on 15 pixels for now Okay, and as you guys can see it's already looking a lot better than it did before I'm just going to increase the font size a bit more as well because now we have a different scenario here and I accidentally changed the name. I just realized it should have been the placeholder okay If you guys wanted to we could also do these on separate lines obviously by just including a P tag, but just like this and it would shift to the next line the same would be done to the password field if you wanted the login and register button to be pushed down further and Obviously, it's going to align automatically If you wanted to you could also set a background color for this for the text fields so background Color would be I'd say gray for now Or you can just leave it alone Without touching it because right now it doesn't seem very nice You could pick like a lower grade gradient of gray if you like to so this text doesn't look the most appealing so I'm just going to change the font family of it, which is the Font type which we're using and the way we reference it is by saying h1 because that's the name of it and I change the font family And just go basic Calibri for now And then as you see it changes to Calibri or you can go with a real as well Includes all the basic ones inside by default you can also change the font size to be a bit more because obviously it's like the Title of the website, so it's kind of it should kind of be big and then obviously you'd have your logo and stuff down there and After that, I believe I could also increase the width a bit more because now the website The title size has increased too So and you can also put like some text above the form saying welcome to Wages calculator or something like that and that would be in the center as well Just gonna copy and paste these on each side And as you see it's already looking like it's starting to assemble as an actual website So I'm gonna change the font family of the paragraph quickly and make it area as well And now that we have that done. We're just gonna refresh take a look and everything seems good so far Also, what you might want to do is push this whole thing towards a bit more Sensor of the screen Instead of being all the way to the top. So the way we're gonna do that is we're gonna create a new division for this whole thing so From top to end we're just gonna do division and we're gonna copy the end of the division and paste it We're gonna paste it right about here And then we're gonna give it the ID and call it body or let's just call it main and Then we can reference that main from up here and say margin Top would be hundred pixels down and as you guys can see the more number you add It's gonna shift lower down toward the screen and it starts looking a bit more better than it did before Now all we have to do is obviously design the whoops Now all we have to do is obviously design the What do you say? We're login and register buttons so that the website's ready on the login and register side So how we're gonna do that is basically do the same thing as we did for the Text fields we're gonna give it a new ID and call it You just call it buttons when I'll copy that and paste it in the other submit button as well And now we can move on to adding the rest of the style for the buttons We're gonna give it a height of 27 27 might be a bit too much let's go with 20 and we're gonna give it a The width we're gonna try and keep it the same as the text field so 200 pixels Continue and obviously we need to push it downwards so that it has a gap between we do that using the paragraph Or you can use the break tags as well Just gonna continue and we have a clean login and register button. We might increase the height a bit more Seems about right and I'm gonna add 200 and turn there 220 maybe 25 should do the job Yeah now you can also change the Colors of the buttons to make them look more appealing. You could take off the borders And then you can add You can add like a hover style to them if you like so when the user hovers over it does a Specific action or something like that you can add a button border like we did for the For the text fields, I'm gonna do solid black One pixel that should have okay We did it the other way around it should be border bottom Just border bottom Okay, and as you guys can see we have login and register buttons ready and now we can move on to Creating a hover so I hover is almost like an animation for the button But not really an animation. So the way you would do it is button Call on hover And then write in the properties. So for us, we're gonna be changing the Actually, all we will do is do a Border right Solid red two pixels So what this is gonna do is when we Essentially when we hover over the button Just gonna change that to buttons However with the button, it's gonna obviously create this little red border on the side You can change the properties and make it do whatever you want. So if you wanted to you could also increase the font size To 20 pixels when the user hovers over the thing I wouldn't recommend it But if you like to it's your option So if you like to do that, you can do that as well And then obviously all we have to do now is change the styling for the messages that show up on The PHP script how we're gonna do that is by giving it an ID as well So instead of just doing it normal echo We have to put them in a paragraph tag and Center it as well So in that way, they will have a bit of style to them as well instead of Just littering around Account has been created. We're gonna do the same here Just do the same again So if we click on register again, it's nice and clean. It says account with this name already exists We can do that the same steps for the incorrect user name and password as well. So it's nice and clean So on stats done, we're just gonna refresh the page register Try and log in with a fake username and password incorrect username or password displays If you try and log in obviously it's gonna take you because we haven't added validation to our website yet So even if we create like Even if we create like a blank Oops, even if we create like a blank account It's not it's gonna still register it and then when we click on login It's obviously gonna log as in because we haven't added validation yet in the next tutorial I'm gonna be showing you guys how to add validations to our websites So that a user is not able to leave a field blank and click on register or login as well as Make sure that the fields are Filled in for the password and username and the user is not allowed to log in while they are left blank Anyway guys, that was it for today's tutorial. Hope I was able to help If you guys have any new ideas for future videos, please do comment them in the comment section Please also do subscribe as it really helps me out and I'll see you guys in the next one. Peace out