1 00:00:00,380 --> 00:00:05,310 Good, we have this plain webpage now and let's go ahead and write some CSS code 2 00:00:05,310 --> 00:00:13,170 so I have the index.html file in here and then I have the CSS file which is empty, 3 00:00:13,170 --> 00:00:18,420 empty for now so I just went here and split it down so that I have it down 4 00:00:18,420 --> 00:00:25,769 here in Atom. And here is a rendered web page so index dot HTML. Yeah, you 5 00:00:25,769 --> 00:00:29,699 don't have to declare anything here, you just in the CSS you just need to point 6 00:00:29,699 --> 00:00:37,800 to your tags to your HTML elements. So container that is this one here 7 00:00:37,800 --> 00:00:44,430 so the division which wraps up the entire page including the inputs and titles 8 00:00:44,430 --> 00:00:49,530 here, so container and then you use these curly brackets so as I suppose you know 9 00:00:49,530 --> 00:00:57,960 about the margin and these other basic attributes of CSS, I'll encourage you to 10 00:00:57,960 --> 00:01:04,500 go to a quick CSS tutorial if some if you don't find something clear in 11 00:01:04,500 --> 00:01:16,380 here. CSS is easy. Width 100% and height as well and these specify the width and the 12 00:01:16,380 --> 00:01:19,920 height of the container and 100% meaning the container will 13 00:01:19,920 --> 00:01:25,380 occupy the entire page and then you have background color. I have noted some 14 00:01:25,380 --> 00:01:32,790 colors down here, so this should be something like four sixes so what we have 15 00:01:32,790 --> 00:01:41,850 so far is this page so this is the color that I just specified so if you 16 00:01:41,850 --> 00:01:49,970 want to change the color of that now you'd want to pass color and maybe this. 17 00:01:52,189 --> 00:01:55,189 Yeah. You want to specify how the overflow will 18 00:01:58,509 --> 00:02:05,320 behave so if you pass scroll in here and the element goes outside of the sides 19 00:02:05,320 --> 00:02:11,410 of the container you'll get some sliders there, but hidden is more commonly used. 20 00:02:11,410 --> 00:02:16,000 Of course you can experiment with these parameters and see which one works best 21 00:02:16,000 --> 00:02:21,610 for you and let's put the text in the center so text align, that would be 22 00:02:21,610 --> 00:02:29,860 center, yeah. So it's looking better now and you can see these margins here 23 00:02:29,860 --> 00:02:35,799 outside of the container so we want to remove them and also fill this empty 24 00:02:35,799 --> 00:02:41,049 space with this color. To do that you'd want to point to the 25 00:02:41,049 --> 00:02:54,069 HTML tag and then to the body tag. Height would be 100%. The margin is zero so we don't 26 00:02:54,069 --> 00:03:00,609 want that to be displayed. Yeah, now it's looking much better. 27 00:03:00,609 --> 00:03:09,670 Great! What else? If you want you can specifically point to this h1 tag so 28 00:03:09,670 --> 00:03:12,579 text of an h1 tag and the text on the h3 tags. 29 00:03:12,579 --> 00:03:18,760 I'll leave the h3 tags like it is but I'll change the h1 tag and to do that you'd 30 00:03:18,760 --> 00:03:28,350 point to the container and then to the h1 tag font-family and that would be, let's 31 00:03:28,350 --> 00:03:46,540 say Arial sans serif30. Maybe font size let's say pixels and another color as well. 32 00:03:46,540 --> 00:03:54,370 Yeah, let's see how this goes. Yep, the font changed. Maybe we can change the margin, 33 00:03:54,370 --> 00:04:02,950 the top margin. Let's say 80 pixels. Let's see how it changes. Yeah so it's 34 00:04:02,950 --> 00:04:08,950 further down now. Good, now let's point to the form and you could do that by making 35 00:04:08,950 --> 00:04:17,370 use of a container class division and then point to the form tag mmm so let's 36 00:04:17,370 --> 00:04:24,669 modify the margin here, pixels and see how this changes things. 37 00:04:24,669 --> 00:04:30,190 So the four went further down. That means you are able now to discriminate 38 00:04:30,190 --> 00:04:39,280 between the form and the upper text. You change it to whatever you like and some 39 00:04:39,280 --> 00:04:46,000 more elements. The input, to point to the input again you can say container and then 40 00:04:46,000 --> 00:04:52,210 input and that will affect both your or your inputs. If you want to affect 41 00:04:52,210 --> 00:04:57,130 only one input so one by one, you could specify a different class for each input 42 00:04:57,130 --> 00:05:02,289 so you could say class here, email class and then the number class here and 43 00:05:02,289 --> 00:05:08,229 then you point to those classes so like email and then you write the things there, 44 00:05:08,229 --> 00:05:14,560 the attributes but I'll go ahead and modify both the input fields with the 45 00:05:14,560 --> 00:05:29,160 same attributes so the width would be 350 pixels, height let's say 15 pixels. 46 00:05:29,220 --> 00:05:42,460 Font size the same. The margin would be, or let me try what we have so far and yeah you 47 00:05:42,460 --> 00:05:49,389 can see that we were able to modify the width and height of these fields, so if 48 00:05:49,389 --> 00:05:56,370 you want separation between them you could do something like margin and then 49 00:05:56,370 --> 00:06:04,030 let's say 2 pixels, save go there, reload, yep, now you see you have a space 50 00:06:04,030 --> 00:06:12,219 between. Good. If you see the text starts at the very beginning of the input box. 51 00:06:12,219 --> 00:06:16,599 If you want it to start like further on the right so you could 52 00:06:16,599 --> 00:06:28,649 do something like padding and maybe 20 pixels, yeah now looks great. 53 00:06:28,649 --> 00:06:35,319 So our form is taking shape and we still have to do the submit button or we 54 00:06:35,319 --> 00:06:42,819 can add something else here to do some transition there, transition of 0.2 seconds 55 00:06:42,819 --> 00:06:50,520 and ease in out method. So if you try that now 56 00:06:50,520 --> 00:06:55,479 you see we have a nice transition there when we load the page. So I'm loving the 57 00:06:55,479 --> 00:07:00,669 page here, good. Now the button. How can you grab the 58 00:07:00,669 --> 00:07:18,749 button? Yeah, container button and a width of 70 pixels. Height maybe 30 pixels. 59 00:07:18,749 --> 00:07:28,259 Background color this time I'll put a color name still blue, steel blue, yeah. 60 00:07:28,259 --> 00:07:34,899 Yeah, what do I have so far? Yeah, it's looking good. You can also add a border 61 00:07:34,899 --> 00:07:39,969 attribute and then a border color attribute as well to modify the color of 62 00:07:39,969 --> 00:07:42,729 your border. I'll leave it like that. 63 00:07:42,729 --> 00:07:53,589 Margin maybe 4 pixels. See how that changes things, yeah. So the bottom went 64 00:07:53,589 --> 00:08:02,499 further down so we have some space there. Or we can leave it 3 pixels. Yeah, good so I 65 00:08:02,499 --> 00:08:07,919 think this looks good. Maybe we need to less space here between the form and 66 00:08:07,919 --> 00:08:17,649 the line so we go to the form maybe reduce this margin to 20 pixels. 67 00:08:17,649 --> 00:08:23,099 Yeah, this looks better so that's about our index dot HTML page. How about the 68 00:08:23,099 --> 00:08:28,349 success dot HTML page? Let's see how that looks like. 69 00:08:28,720 --> 00:08:38,240 Yeah, this looks good as well I believe. So the success dot HTML is this one here and yeah. 70 00:08:38,240 --> 00:08:45,860 Or we can put this text further down so just here maybe. To do that you use the 71 00:08:45,860 --> 00:08:53,740 same CSS but you'd want to point to the container class of success dot HTML so 72 00:08:53,740 --> 00:09:04,250 container and then to the P tag so let's modify them the margin there. 73 00:09:04,250 --> 00:09:23,150 200 pixels maybe. That looks… Or maybe less. 150 or just 100. I think this this looks 74 00:09:23,150 --> 00:09:26,630 good. So this 100 pixels means this text, this 75 00:09:26,630 --> 00:09:33,200 block here is 100 pixels away from the left margin and 100 from there from 76 00:09:33,200 --> 00:09:39,440 upper one, from the top and 100 from the right and so on. That means if you want 77 00:09:39,440 --> 00:09:44,180 with text to have specific margins from the left and from the right and you know 78 00:09:44,180 --> 00:09:49,670 you'd have to pass its left top right. This is good I think, so I'll leave it 79 00:09:49,670 --> 00:09:54,740 like that. And we are done with the CSS and with this lecture so I hope you 80 00:09:54,740 --> 00:10:00,110 enjoyed this lecture. Of course if you want you can change this styling, but I'd 81 00:10:00,110 --> 00:10:04,130 suggest you don't spend much time with these because in the next lecture we 82 00:10:04,130 --> 00:10:10,550 would be working on the Python script. So yeah I'll talk to you in the next 83 00:10:10,550 --> 00:10:11,000 lecture.