Lesson Summary: Adding Text Box and Button with CSS Styling

We are back in this lesson we are going to add the text box and the button. Let's get started. So before the entries what I call entries these lines of thought or text that the user has written. So before that let's add a place for the user to type multiple lines. We're going to use the tag called text area. Okay text area. You can close the tag as well. So this text area if we save it and just refresh the browser you can see it's right here you can type anything. It's a very basic control of multi-line input. You can resize here. Anyway let's add a button now after the text area. Open tag button. Close tag. Now the button in between the tags here you place whatever you want to show for the button we can say write or submit or whatever you want. Let's save it and reload the browser see the buttons right next to the text area. Now that is okay but how about the right being its own line. Very basic trick you can do to make the button be a new line just add a div and close the button inside the div. Because the div occupies the whole line that button will occupy the space of a whole line. So it will break a line instead of being the same line as the text area. Nice. Okay so that's it for text area and the button. Now it's not doesn't look very nice. How about we add also styles. Now to style the page visuals we use CSS cascading style sheets. Now CSS we're going to do following we're going to define what are what are called classes and for each class we're going to define a certain combination of styles and we're going to apply that class to the HTML elements. Now all those tags are wrote we also call them elements of the page. We have an element there remember the element tab. So this is an element text area this is an element div this is an element button and so on. So we're going to apply the class to the elements. Since the class will have a corresponding defined style that style will be applied to that element. Now you can write those styles in the same file as the HTML but that's not very good practice. So we're going to do the following we are going to create a new file called styles.css.css extension for the cascading style sheets. So let's start with the following see the text is kind of glued together we cannot distinguish these three entries let's add a border surrounding them. How about that. So let's create what's called the class classes are created if you give a dot followed by the name of the class. I usually like to use dash or snake case means this meaning use lower case and when you have multiple words the separator of the dash in between. I'm going to say dots because I want to define a class. Let's say let's just say entry because I want to call each of these things an entry. Now you open braces and close braces. I usually like for style it doesn't matter if you have these spaces in between line breaks or not but usually we have a standard style and the style is you place everything in a new indentation level that is two spaces for me. So I'm going to change the border and we say border that's the property that's that's property I want to change colon and that's the value. So we have the name of the property on the left hand side followed by colon followed by the value. I usually put a space after the colon just for style and I'm going to say one px px pixel the unit of measurement here and let's say solid and let's use black color. Now David reload the page nothing happened why well I defined a class but I did not tell it to use the class for the entry elements. So to do that we need to first find a way to connect this style sheet file with the index.html file and then we have to tell hey for the element corresponding to this text please add the class the style defined by class called entry. Let's go back to index.html. Now to link the style sheet you have to add a link tag. So here after the time inside under the head okay usually we place a CSS link tags inside the head tag right before the end of the head right before the end of the head. So I'm gonna add a link tag and I have autocomplete in my editor so I can just type link and tab and it will autocomplete everything that's needed to create the link. Now this link tag is more sophisticated because it has extra things in between here the greater than and the name of the tag those are called attributes so I have a real attribute and an href attribute. So these tell something extra about the tag in this case the link tag telling hey this is a style sheet and this is where you find that. Now the href is the location where it is what is this wrong so I put it in the same director as index.html so I have to say simply styles.css and that will work just fine that's in the file name for these styles.css. Now great I linked the style of the index now I have to apply the class called entry. Now locate the element you want to modify stylistically these divs now you add what's called the attribute called class to the element so remember the attribute is between the opening tag name and the greater than put a space there and add an attribute called class. Now that's the name of the attribute I need to define a value for that and for that I put a equals being between and you have double quotes and that's everything has to be double quotes for the value. The value will be the name of the class in this case entry. Now there's no dot dots are just for the style sheet because the style sheet needs to know why you're defining class or other things such as the id or the elements themselves can do that way learn about that as we go on anyway that's the entry name of the class without a dot here and it's applied to this very first thing save the file refresh you can see now there's a border surrounding the very first entry element. Now there's isn't a bar for the others because we didn't apply the class so let's apply the class to the others now that we know how to apply class just add our attribute class to the div class entry to the second div to the third div same thing space class entry very nice now all three of them will have border yeah well it's not that great right they're too close together how about we add space in between them but what space between them can we use what's called the margin so we have the box model is how you can think of these html elements in css you can see at right hand side it there's even a box thing you can see if I highlight let's see let's highlight the first entry so it's highlighted here I selected I clicked on it and it shows me the kind of box model here and there's certain certain concepts you have to understand and it's a concept of margin border and padding now you can see I highlight this thing if you can see the colors that correspond to the diagram here on right hand side if you can see there's a color of the very inner thing that has the number 688 by 36 that's the actual content right of the element and that's what's highlighted here on the left hand side as I have heard the most now it's outside of that there's something called a padding well it doesn't have anything there's a dash there because there's no padding padding is that thing that's space between the actual content and the border you can see there's no space between the actual content and the border no that'd be nice if we had that right so how about we try and add some padding well we can try it right here on the left on right hand side you have the styles tab and you have element style we can click here and you can apply CSS styles on the spot so I can say let's say padding hold on I could press a tab and I give a value we can start value one px and you can increase as needed you can see now padding is one now observe as I increase the padding on the left hand side the color green if you can see the color between the border and the actual content is increasing and that's what's called the padding the space between the border and the content of the element now there's too much padding so I'm gonna dial it down I just press the arrows up and down arrows to change I think maybe six will be fine for me you could choose whatever you want so I can click out and it will adopt that style now this is not saved so be very careful because whatever you write here if you reload the page you lose the style this is good for debugging in real time we're gonna use it a lot but make sure you always copy and paste this back to your actual CSS file when you are done so I'm gonna go back to my text editor styles.css for the entry I'm also gonna add a padding now the six px padding will apply to both the top bottom left and right so there are there are other ways of defining padding only for the top only for the bottom only for the top only for the left and for right and that's using different values right here right now the values apply to everything if you want to know how to apply in different ways I suggest a good look at documentation let's go there one website that's good for web documentation is the mdn mozilla developer network developer.mozilla.org very good site now I can go here maybe I can do a search and I want to know about padding so the third one is see is under a web css padding that's the one that we want and you can see it has all the examples you can see we did the first one with one value there's the one of two and three and four and so on and they mean different things for example this one of four is the very very explicit one that tells you you can specify the padding space separately individually for the top you know let's see top right bottom left so that's the syntax right here if you have four things that's the value the first one be for the top second for the right third one for the bottom and the other one for left take your bits like clockwise starting from 12 o'clock right as you remember these things if you have four it's clockwise starting from the top top right bottom left and there's the other ones for example see what if you want to just change the vertical one individually against the horizontal one too you can use two and so on I recommend you read this page and see the examples here in any case that is padding going back to nice so we learned padding is the space between the border and the actual content nice now there's another thing if I hover over it you can see there's this thing called margin a margin is the space from outside the border outside the element from the border to the outer content see we don't have any padding right now what we want to do is get all these entries a little bit separated right because they're glued together from top to the bottom so we want to add some space after each of these entries except the last one it won't matter much right now so that's the color margin so let's try to I'm going to write margin here on right hand side during the styles I'm going to start one px just to see what it looks like and you can see it's adding space all around from the outside to the border well it's very nice but I don't want space all around I just want a space at the bottom so maybe I just want the bottom right well I don't want to look up all those you know ways of this individually setting the margin so you can instead do the following you can say margin dash bottom that's a way you can specifically target only the bottom margin so margin dash bottom nice so I'm going to start from one px you can see it increases from the bottom that's very nice right uh six I think it's still too close a little bit how about nine 12 up to you I'll leave it at 12 okay that's nice let's copy this and space in our spread no style sheet what's called this file there's no specific order for these styles but sometimes you might want to order in an alphabetical order to make it organized notice when you define the class is dot for the class entry open braces I like to indent two spaces for en one property and value per line property name colon value always end with semicolon don't forget semicolon very important always end with semicolon I like to put a space between the colon and the value it's like a standard CSS style that many people use okay nice now we got it saved we copied everything for our playground here we can reload the page and everything on the right hand side would be gone from the element style and it will then appear under the entry you're going to see and everything will be changed accordingly you can see now all of them have the style because now it's part of the entry very nice right and you can play around with the classes here you can remove an appropriate from the class if I remove padding checkbox you can see what it looks like without padding with padding without margin with margin with vowel border with border very very useful tool to work with the style in real time so I think for this class for this lesson we're done and I'll see you in the next one