1 00:00:00,300 --> 00:00:02,600 Great we have progressed quite a bit. 2 00:00:02,610 --> 00:00:10,440 We have a Python script that generates a Flask app and we have two functions and each of them maps two HTML 3 00:00:10,440 --> 00:00:13,190 pages to two different URLs. 4 00:00:14,280 --> 00:00:20,250 And this is our Web site with two web pages. 5 00:00:20,300 --> 00:00:27,490 It is like sure we will add some CSS styling to this website so that this looks just like any other 6 00:00:27,530 --> 00:00:33,720 modern web site and it is visually appealing and it doesn't look like in the 80s. Allright. 7 00:00:36,810 --> 00:00:37,450 To do that 8 00:00:37,470 --> 00:00:40,660 we have to do basically two things. 9 00:00:40,740 --> 00:00:46,710 The first thing is we need to create a CSS file and write the CSS code inside it. 10 00:00:46,940 --> 00:00:54,270 And the second thing is once we write this CSS code, once we have the CSS file we need to link to it from 11 00:00:54,270 --> 00:00:57,250 our layout dot HTML file. 12 00:00:57,600 --> 00:01:00,150 CSS is s.c.s as HTML. 13 00:01:00,480 --> 00:01:05,990 So if you don't know it, I would suggest you look at some tutorials and I'm sure you'll get used to CSS 14 00:01:06,000 --> 00:01:11,280 very quickly and I already have the CSS file that will stylize my website. 15 00:01:13,860 --> 00:01:24,810 I'll cut this and put it in a folder which I'll call static. Inside here, I'll create another folder and call it CSS 16 00:01:25,400 --> 00:01:30,050 and I'll paste the CSS file just inside here. 17 00:01:30,180 --> 00:01:32,530 So let me close this. 18 00:01:33,180 --> 00:01:40,090 As you see the folder I created and the file has been reflected in the treeview here inside atom. 19 00:01:40,530 --> 00:01:46,050 So the idea is that Python looks for static files in static folder. 20 00:01:46,260 --> 00:01:49,400 So here inside the static folder you can't put different files. 21 00:01:49,530 --> 00:01:56,100 For example if you want to add an image to your website you'd create a folder in here called images and then 22 00:01:56,100 --> 00:02:02,040 put images inside the folder then you can link those static files from your layout HTML page 23 00:02:02,480 --> 00:02:04,300 Or from many other pages. 24 00:02:04,340 --> 00:02:10,410 Now before opening the CSS file and going quickly through it I'd like to show you how you can link 25 00:02:10,500 --> 00:02:11,660 to the CSS file. 26 00:02:11,850 --> 00:02:19,500 Now remember the visible part of an HTML code that goes inside the body tags while links like 27 00:02:19,500 --> 00:02:24,200 links to Java script files or links to CSS files go outside of it. 28 00:02:24,930 --> 00:02:32,110 And those should be put inside head tags so head here and there. 29 00:02:32,120 --> 00:02:35,190 Then we have a link tag. 30 00:02:36,900 --> 00:02:39,310 The rel there means the relationship. 31 00:02:39,480 --> 00:02:43,700 So the relationship to a file we are linking to a stylesheet. 32 00:02:43,740 --> 00:02:48,490 So we are sort of declaring the type of the file we are linking to. 33 00:02:48,600 --> 00:02:56,380 So it's a CSS stylesheet and then we have the reference here which will be equal to URL 34 00:02:56,880 --> 00:03:05,360 for function which takes this argument folder name where the file is located and the file name parameter 35 00:03:06,170 --> 00:03:11,470 which is a equal to CSS. Main.css. 36 00:03:11,490 --> 00:03:19,080 So what we got here is we declared a type of a file we are linking to and then we put the link over the file and this should 37 00:03:19,100 --> 00:03:21,910 be in quotes. 38 00:03:22,140 --> 00:03:31,290 So all of this. And I would also like to add the title for the website. 39 00:03:31,460 --> 00:03:31,940 Let's ay 40 00:03:31,980 --> 00:03:36,160 Flask app. 41 00:03:36,180 --> 00:03:36,570 That's it. 42 00:03:36,570 --> 00:03:44,150 I'll save this and I'll go and try out the website. 43 00:03:44,840 --> 00:03:47,420 Oh can you see the difference. 44 00:03:47,530 --> 00:03:52,960 Yeah we have a menu here very nicely, about page, home page. 45 00:03:53,040 --> 00:03:58,590 And we have a title, just here and then the content of the web page goes here. 46 00:03:58,590 --> 00:04:06,660 Now all these bars here, the background, the paddings, all of these have been defined using 47 00:04:06,660 --> 00:04:11,850 CSS, so let's go ahead and have a look at the CSS code. 48 00:04:12,210 --> 00:04:13,460 Here it is. 49 00:04:13,530 --> 00:04:16,260 I believe this is quite self-explanatory. 50 00:04:16,500 --> 00:04:22,520 But anyway what we have is basically this is an HTML element. 51 00:04:22,900 --> 00:04:25,150 So the body you see it. 52 00:04:25,500 --> 00:04:30,900 And once we write the symbol element in the CSS script we use curly brackets. 53 00:04:30,900 --> 00:04:36,690 And then inside the curly brackets we define these attributes so the margin, padding and the font 54 00:04:36,690 --> 00:04:39,900 family for the text and the color of the text. 55 00:04:40,170 --> 00:04:47,660 If you want to change this let's say 999, save and go to the web page reload, you'll see that the 56 00:04:47,670 --> 00:04:49,860 text got some different color. 57 00:04:50,040 --> 00:04:54,530 So this is quite grayed out. 58 00:04:55,170 --> 00:05:03,690 So this means this attribute here is affecting the body of the website. So, I'll put this back to 444. 59 00:05:03,690 --> 00:05:04,530 60 00:05:04,590 --> 00:05:10,910 Then you have the header element which is responsible for this herader here. 61 00:05:10,920 --> 00:05:11,730 So the top. 62 00:05:15,120 --> 00:05:25,380 Then if you want to stylize the specific part of your web page, let's say only the logo which is this one 63 00:05:25,380 --> 00:05:34,080 here, you'd have to refer to the header first and then to the h1 element and then you refer to the 64 00:05:34,080 --> 00:05:34,970 logo class. 65 00:05:35,010 --> 00:05:38,440 So this is a class name, just here. 66 00:05:39,660 --> 00:05:44,270 And so on and so forth you can look at this code at your own pace I believe. 67 00:05:44,550 --> 00:05:49,070 So the logic is the same. Great. 68 00:05:49,540 --> 00:05:55,890 And now we are ready to deploy this website online on the cloud. 69 00:05:56,700 --> 00:05:59,020 So we'll do that in the next lectures. 70 00:05:59,400 --> 00:05:59,880 See you there.