1 00:00:00,013 --> 00:00:02,293 Great, we have progressed quite a bit. 2 00:00:02,430 --> 00:00:04,565 We have a Python script that generates a 3 00:00:04,590 --> 00:00:06,870 Flask app, and we have two functions. 4 00:00:07,950 --> 00:00:11,190 And each of them maps to HTML pages to 5 00:00:11,215 --> 00:00:15,913 two different URLs. And this is our website 6 00:00:17,660 --> 00:00:20,460 with two webpages. In this 7 00:00:20,460 --> 00:00:23,370 lecture, we will add some CSS styling to 8 00:00:23,370 --> 00:00:26,490 this website, so that this looks just 9 00:00:26,490 --> 00:00:29,400 like any other modern website, and it is 10 00:00:29,400 --> 00:00:31,140 visually appealing, and it doesn't look 11 00:00:31,140 --> 00:00:33,688 like in the 80s, all right. 12 00:00:33,712 --> 00:00:36,557 [No audio] 13 00:00:36,582 --> 00:00:40,710 To do that, we have to do basically two things. The 14 00:00:40,710 --> 00:00:42,750 first thing is we need to create a CSS 15 00:00:42,750 --> 00:00:45,450 file and write the CSS code inside it. 16 00:00:46,740 --> 00:00:48,750 And the second thing is, once we are in 17 00:00:48,750 --> 00:00:51,360 this CSS code, once we have the CSS 18 00:00:51,360 --> 00:00:54,480 file, we need to link to it from our 19 00:00:54,750 --> 00:00:59,070 layout.html file. CSS is as easy as 20 00:00:59,070 --> 00:01:01,560 HTML. So if you don't know, I would 21 00:01:01,560 --> 00:01:03,810 suggest you look at some tutorials. 22 00:01:04,110 --> 00:01:06,150 And I'm sure you'll get used to CSS very 23 00:01:06,150 --> 00:01:09,180 quickly. And I already have the CSS file 24 00:01:09,180 --> 00:01:11,194 that will stylize my website. 25 00:01:11,218 --> 00:01:13,441 [No audio] 26 00:01:13,466 --> 00:01:18,210 I'll cut this, and put it in a folder, which I'll 27 00:01:18,275 --> 00:01:22,290 call static. Inside here, I'll create 28 00:01:22,290 --> 00:01:25,470 another folder and call it css, and 29 00:01:25,495 --> 00:01:28,765 I'll paste the CSS file just inside here. 30 00:01:30,056 --> 00:01:34,205 So let me close this. As you see the 31 00:01:34,230 --> 00:01:36,600 folder I created, and the file has been 32 00:01:36,600 --> 00:01:39,210 reflected in the tree view here inside 33 00:01:39,210 --> 00:01:42,480 atom. So the idea is that Python looks 34 00:01:42,480 --> 00:01:45,300 for static files in the static folder. 35 00:01:46,080 --> 00:01:48,030 So here inside static folder, you can 36 00:01:48,030 --> 00:01:50,160 put different files. For example, if you 37 00:01:50,160 --> 00:01:52,620 want to add an image to your website, 38 00:01:52,890 --> 00:01:54,690 you'd create a folder here called 39 00:01:54,720 --> 00:01:57,210 images, and then put images in inside 40 00:01:57,210 --> 00:01:59,460 the folder, then you can link those static 41 00:01:59,460 --> 00:02:02,400 files from your layout.html page, or 42 00:02:02,400 --> 00:02:04,770 from any other pages. Now, before 43 00:02:04,770 --> 00:02:07,080 opening the css file, and going quickly 44 00:02:07,080 --> 00:02:09,660 through it, I'll like to show you how you 45 00:02:09,690 --> 00:02:12,360 can link to the css file. Now remember, 46 00:02:12,360 --> 00:02:15,600 the visible parts of an HTML code goes 47 00:02:15,600 --> 00:02:19,380 inside the body tags, while links, like 48 00:02:19,380 --> 00:02:21,330 links to JavaScript files, or links to 49 00:02:21,330 --> 00:02:25,230 css files go outside of it, and those 50 00:02:25,230 --> 00:02:28,088 should be put inside head tags. So head here 51 00:02:28,112 --> 00:02:30,112 [No audio] 52 00:02:30,137 --> 00:02:33,288 and head there, and then we have the link tag. 53 00:02:33,312 --> 00:02:36,703 [No audio] 54 00:02:36,728 --> 00:02:38,040 And the rel there means the 55 00:02:38,040 --> 00:02:40,950 relationship, so the relationship to the 56 00:02:41,154 --> 00:02:44,454 file, we're linking to is the stylesheet. So 57 00:02:44,700 --> 00:02:47,040 we're sort of declaring the type of the 58 00:02:47,040 --> 00:02:49,620 file we are linking to. So it's a CSS 59 00:02:49,620 --> 00:02:52,320 stylesheet. And then we have the 60 00:02:52,346 --> 00:02:55,076 reference here, which will be equal to 61 00:02:55,595 --> 00:02:59,195 the url_for function, which takes as 62 00:02:59,220 --> 00:03:02,490 argument folder name, where the file is 63 00:03:02,490 --> 00:03:06,240 located, and filename parameter, which 64 00:03:06,240 --> 00:03:11,820 is equal to css/main.css. So what 65 00:03:11,820 --> 00:03:14,340 we got here is, we declared the type of 66 00:03:14,340 --> 00:03:17,490 the file link to and then we put the link of 67 00:03:17,515 --> 00:03:21,655 the file, and these should be in quotes. 68 00:03:21,960 --> 00:03:23,394 So all of this. 69 00:03:23,418 --> 00:03:25,569 [No audio] 70 00:03:25,606 --> 00:03:28,048 And I'd also like to add a title 71 00:03:28,079 --> 00:03:30,256 [Author typing] 72 00:03:30,281 --> 00:03:33,321 for the website, let's say Flask App. 73 00:03:33,345 --> 00:03:35,910 [No audio] 74 00:03:35,935 --> 00:03:37,442 That's it. I'll save this. 75 00:03:39,082 --> 00:03:45,060 And I'll go and try out the website. Oh! 76 00:03:45,900 --> 00:03:48,750 Can you see the difference? Yep. We have 77 00:03:48,750 --> 00:03:51,990 the menu here, very nicely, about page, home 78 00:03:51,990 --> 00:03:55,200 page, and we have the title, this here. 79 00:03:56,160 --> 00:03:58,200 And then the content of the webpage 80 00:03:58,200 --> 00:04:01,350 goes here. Now all these bars here, the 81 00:04:01,350 --> 00:04:04,500 background color, the paddings. All of 82 00:04:04,500 --> 00:04:07,650 these have been defined using css. So 83 00:04:07,650 --> 00:04:09,690 let's go ahead and have a look at the 84 00:04:09,690 --> 00:04:14,340 css code. Here it is. I believe this is 85 00:04:14,340 --> 00:04:18,270 quite self explanatory. But anyway, what 86 00:04:18,270 --> 00:04:21,300 we have is basically this is an HTML 87 00:04:21,300 --> 00:04:25,800 element. So the body is here, and once 88 00:04:25,800 --> 00:04:28,020 we write the HTML element in the css 89 00:04:28,080 --> 00:04:31,140 script, we use curly brackets and then 90 00:04:31,140 --> 00:04:33,060 inside of curly brackets, we define 91 00:04:33,060 --> 00:04:35,220 these attributes. So the margin, the 92 00:04:35,220 --> 00:04:37,950 padding, and the font-family for the text, 93 00:04:38,430 --> 00:04:40,530 and the color of the text. If you want 94 00:04:40,530 --> 00:04:44,130 to change this, let's say 999, save and 95 00:04:44,130 --> 00:04:47,250 go to the webpage, reload, you'll see 96 00:04:47,250 --> 00:04:49,620 that the text got some different color. 97 00:04:49,860 --> 00:04:52,188 So this is quite grayed out. 98 00:04:52,212 --> 00:04:54,933 [No audio] 99 00:04:54,958 --> 00:04:58,800 So that means this attribute here is affecting 100 00:04:58,800 --> 00:05:02,790 the body of the website. I'll put this back 101 00:05:02,790 --> 00:05:05,460 to 444, then you have the header 102 00:05:05,460 --> 00:05:09,630 element, which is responsible for this 103 00:05:09,630 --> 00:05:11,595 header here, so at the top. 104 00:05:11,620 --> 00:05:14,861 [No audio] 105 00:05:14,886 --> 00:05:19,290 Then if you want to stylize a specific part of your 106 00:05:19,315 --> 00:05:22,398 webpage, let's say only the logo, 107 00:05:22,422 --> 00:05:24,573 [No audio] 108 00:05:24,598 --> 00:05:29,280 which is this one here. You would have to refer to 109 00:05:29,280 --> 00:05:31,740 the header first and then to the h1 110 00:05:31,770 --> 00:05:34,350 element, and then you refer to the logo 111 00:05:34,350 --> 00:05:37,687 class. So this is a class name, just here, 112 00:05:39,427 --> 00:05:41,250 and so on and so forth. You can 113 00:05:41,250 --> 00:05:43,440 look at this code at your own pace, I 114 00:05:43,440 --> 00:05:47,727 believe. So the logic is the same. Great. 115 00:05:49,334 --> 00:05:51,570 And now we are ready to deploy 116 00:05:51,570 --> 00:05:54,187 this website online on the cloud. 117 00:05:54,211 --> 00:05:56,525 [No audio] 118 00:05:56,550 --> 00:05:58,921 So we'll do that in the next lectures. 119 00:05:58,946 --> 00:06:00,100 See you there.