1 1 00:00:00,340 --> 00:00:01,930 Hi guys and welcome back. 2 2 00:00:01,930 --> 00:00:02,763 In this video, 3 3 00:00:02,763 --> 00:00:05,480 let's continue with our learning HTML project. 4 4 00:00:05,480 --> 00:00:07,770 So we've learned a little bit about CSS. 5 5 00:00:07,770 --> 00:00:10,370 Now it's time to open back our project folder 6 6 00:00:10,370 --> 00:00:11,760 and if you don't have it, you can download it 7 7 00:00:11,760 --> 00:00:14,350 from the resources section of this lecture 8 8 00:00:14,350 --> 00:00:16,690 and then open up the HTML file in there. 9 9 00:00:16,690 --> 00:00:18,810 You should see something like what I've got right now, 10 10 00:00:18,810 --> 00:00:23,340 which is a pretty bare bones page with no styles 11 11 00:00:23,340 --> 00:00:24,920 and an image in there. 12 12 00:00:24,920 --> 00:00:26,700 So throughout this section, we're gonna be working 13 13 00:00:26,700 --> 00:00:30,360 on the CSS code for this project which is gonna make it look 14 14 00:00:30,360 --> 00:00:31,490 a lot better. 15 15 00:00:31,490 --> 00:00:32,433 Let's get started. 16 16 00:00:34,060 --> 00:00:36,410 One of the first things that we're almost always 17 17 00:00:36,410 --> 00:00:39,633 gonna change in any HTML and CSS website is something 18 18 00:00:39,633 --> 00:00:43,720 that is surprisingly impactful which is changing the font. 19 19 00:00:43,720 --> 00:00:45,900 In most operating systems and browsers, 20 20 00:00:45,900 --> 00:00:50,480 the default style like you see here is a serif font 21 21 00:00:50,480 --> 00:00:52,450 like Times New Roman. 22 22 00:00:52,450 --> 00:00:53,750 Nothing wrong with that font 23 23 00:00:53,750 --> 00:00:55,940 but nowadays most operating systems 24 24 00:00:55,940 --> 00:00:59,070 use a different style of font for their desktop application, 25 25 00:00:59,070 --> 00:01:02,150 so here you can see throughout basically 26 26 00:01:02,150 --> 00:01:05,440 this entire operating system that you see in my screen, 27 27 00:01:05,440 --> 00:01:08,250 everything is a sans serif font 28 28 00:01:08,250 --> 00:01:10,880 or a monospace font for code. 29 29 00:01:10,880 --> 00:01:15,570 So, the serifs in a font are those tiny extra lines 30 30 00:01:15,570 --> 00:01:18,630 that we see attached to larger strokes of letters 31 31 00:01:18,630 --> 00:01:23,020 in some typefaces and fonts that include the serifs 32 32 00:01:23,020 --> 00:01:24,527 are called serif fonts. 33 33 00:01:24,527 --> 00:01:27,900 And those without the serifs are called sans serif 34 34 00:01:27,900 --> 00:01:30,663 or no serif, sans just means without. 35 35 00:01:32,400 --> 00:01:34,320 So on modern operating systems, 36 36 00:01:34,320 --> 00:01:36,660 there are a few default fonts. 37 37 00:01:36,660 --> 00:01:39,980 On Mac, the font is called San Francisco, 38 38 00:01:39,980 --> 00:01:43,900 that's the name of the font that OS 10 uses as of late. 39 39 00:01:43,900 --> 00:01:45,660 On Windows 10, which is what I'm using here, 40 40 00:01:45,660 --> 00:01:48,050 the default font is called Segoe UI 41 41 00:01:49,170 --> 00:01:53,080 and on Ubuntu, which is the most popular Linux distribution, 42 42 00:01:53,080 --> 00:01:56,520 the default font is very originally called Ubuntu 43 43 00:01:56,520 --> 00:01:59,130 and so we're going to change our styles here 44 44 00:01:59,130 --> 00:02:00,930 to use those default fonts 45 45 00:02:00,930 --> 00:02:04,330 instead of this Times New Roman equivalent. 46 46 00:02:04,330 --> 00:02:07,070 So let's go over to our project here 47 47 00:02:07,070 --> 00:02:10,010 and make sure that you've got this set up well, 48 48 00:02:10,010 --> 00:02:13,010 make sure that you've got your CSS file linked 49 49 00:02:13,010 --> 00:02:15,590 as we learned earlier on, and then we can go over 50 50 00:02:15,590 --> 00:02:19,860 to the CSS file and we can sort of close this sidebar there, 51 51 00:02:19,860 --> 00:02:21,920 we're not gonna need it anymore. 52 52 00:02:21,920 --> 00:02:25,970 What we're gonna do is we're going to open up the body 53 53 00:02:25,970 --> 00:02:28,810 and here we're gonna type-dash family 54 54 00:02:28,810 --> 00:02:31,040 and that is going to allow us to change 55 55 00:02:31,040 --> 00:02:33,250 the font family of the body, 56 56 00:02:33,250 --> 00:02:35,617 which is basically gonna change the font family 57 57 00:02:35,617 --> 00:02:37,000 of the entire document. 58 58 00:02:37,000 --> 00:02:41,160 Here, we want to tell the browser to use the font 59 59 00:02:41,160 --> 00:02:42,750 that we want it to use 60 60 00:02:42,750 --> 00:02:45,490 but we also have to tell the browser what should happen 61 61 00:02:45,490 --> 00:02:48,340 if the font that we tell it to use is not available, 62 62 00:02:48,340 --> 00:02:51,680 because something to remember is that fonts are installed 63 63 00:02:51,680 --> 00:02:53,000 in your computer. 64 64 00:02:53,000 --> 00:02:56,890 So sometimes I can write a font here that my users 65 65 00:02:56,890 --> 00:02:58,370 are not going to have installed, 66 66 00:02:58,370 --> 00:03:00,940 so it's important to tell it the font that we wanna use 67 67 00:03:00,940 --> 00:03:02,550 as well as the default. 68 68 00:03:02,550 --> 00:03:06,370 So what I'm gonna do is I'm gonna type Apple system 69 69 00:03:06,370 --> 00:03:08,870 and that is the name of the font that some browsers 70 70 00:03:08,870 --> 00:03:13,870 used to refer to the San Francisco font in Mac OS 10. 71 71 00:03:13,890 --> 00:03:15,170 So I know that's a bit confusing, 72 72 00:03:15,170 --> 00:03:18,567 but just type the -apple-system 73 73 00:03:18,567 --> 00:03:20,090 and some browsers are gonna use that 74 74 00:03:20,090 --> 00:03:21,800 to refer to San Francisco. 75 75 00:03:21,800 --> 00:03:23,650 You can also type BlinkMacSystemFont, 76 76 00:03:25,310 --> 00:03:27,280 which some other browsers used to refer 77 77 00:03:27,280 --> 00:03:28,810 to the San Francisco font. 78 78 00:03:28,810 --> 00:03:31,830 Yeah, not helping the situation that there's two names 79 79 00:03:31,830 --> 00:03:34,300 for the same font, there you have it, 80 80 00:03:34,300 --> 00:03:36,593 then we're gonna type Segoe UI, 81 81 00:03:37,540 --> 00:03:39,210 and this is the Windows font. 82 82 00:03:39,210 --> 00:03:43,180 Note that because Segoe UI is made up of two words really, 83 83 00:03:43,180 --> 00:03:44,230 there's a space in between them. 84 84 00:03:44,230 --> 00:03:46,810 We have to put it inside quotation marks. 85 85 00:03:46,810 --> 00:03:51,250 Then we're gonna put Ubuntu for the Ubuntu font 86 86 00:03:51,250 --> 00:03:54,300 and finally, we're gonna put sans-serif 87 87 00:03:54,300 --> 00:03:56,320 and then we're gonna close it off with a semicolon. 88 88 00:03:56,320 --> 00:03:58,920 So what we're doing here is we're telling the browser to use 89 89 00:03:58,920 --> 00:04:00,610 the Apple system font. 90 90 00:04:00,610 --> 00:04:03,260 If that's not available, then use BlinkMacSystemFont. 91 91 00:04:04,190 --> 00:04:07,240 If that's not available, we're gonna go to Segoe UI 92 92 00:04:07,240 --> 00:04:08,650 and then to Ubuntu 93 93 00:04:08,650 --> 00:04:12,520 and finally, we're going to go onto the default browser 94 94 00:04:12,520 --> 00:04:16,870 sans serif font which is usually something like Ariel 95 95 00:04:16,870 --> 00:04:18,020 or something like that. 96 96 00:04:18,890 --> 00:04:21,360 Okay, so obviously in my case, I'm using Windows, 97 97 00:04:21,360 --> 00:04:23,790 so we're gonna stop here and we're gonna load the page 98 98 00:04:23,790 --> 00:04:25,810 using Segoe UI. 99 99 00:04:25,810 --> 00:04:28,890 All right, so, let's save this and refresh the page. 100 100 00:04:28,890 --> 00:04:30,840 And now you can see that the page 101 101 00:04:30,840 --> 00:04:32,770 instantly looks completely different, 102 102 00:04:32,770 --> 00:04:35,590 this looks much more modern, I prefer the look of this. 103 103 00:04:35,590 --> 00:04:38,570 And so, yeah, that's how you change the font family 104 104 00:04:38,570 --> 00:04:40,240 in the page. 105 105 00:04:40,240 --> 00:04:42,070 The other thing that we probably wanna change 106 106 00:04:42,070 --> 00:04:46,050 in most projects is the colour of the text. 107 107 00:04:46,050 --> 00:04:49,700 Completely black text on a completely white background 108 108 00:04:49,700 --> 00:04:51,000 can look a little bit harsh, 109 109 00:04:51,000 --> 00:04:54,610 so we usually make the text slightly grey. 110 110 00:04:54,610 --> 00:04:58,090 You can also make it a dark shade of blue or any other colour 111 111 00:04:58,090 --> 00:05:02,180 if you're using that colour in your page, very extensively. 112 112 00:05:02,180 --> 00:05:06,590 So in my case, we're gonna go for colour is equal to 002244 113 113 00:05:06,590 --> 00:05:10,310 which is a shade of very dark blue. 114 114 00:05:10,310 --> 00:05:12,450 So let's save that and refresh the page 115 115 00:05:12,450 --> 00:05:14,620 and I'm not sure that you'll be able to notice really 116 116 00:05:14,620 --> 00:05:17,390 any difference but the text is very slightly blue 117 117 00:05:17,390 --> 00:05:18,880 and when your users are looking at this, 118 118 00:05:18,880 --> 00:05:20,920 they're gonna find it a little bit easier to read 119 119 00:05:20,920 --> 00:05:22,630 a little bit less harsh. 120 120 00:05:22,630 --> 00:05:25,680 Finally, I feel like the default styles for paragraphs 121 121 00:05:25,680 --> 00:05:28,350 in most browsers result in the lines being 122 122 00:05:28,350 --> 00:05:29,980 a little bit too close together. 123 123 00:05:29,980 --> 00:05:32,650 I like to separate my paragraphs a little bit more, 124 124 00:05:32,650 --> 00:05:34,310 so they're a bit more readable. 125 125 00:05:34,310 --> 00:05:38,520 So I'm gonna do P line-height is 150%. 126 126 00:05:38,520 --> 00:05:40,680 So the percent here is going to refer to 127 127 00:05:40,680 --> 00:05:42,350 the existing line height, 128 128 00:05:42,350 --> 00:05:44,930 so we're gonna make the line height 150% 129 129 00:05:44,930 --> 00:05:46,290 of the current line height 130 130 00:05:46,290 --> 00:05:49,970 which is gonna increase it by about 50%. 131 131 00:05:49,970 --> 00:05:52,630 Yeah, so that just separated our text a little bit more, 132 132 00:05:52,630 --> 00:05:54,240 I think this is gonna be a bit more readable 133 133 00:05:54,240 --> 00:05:56,920 especially if you have long paragraphs. 134 134 00:05:56,920 --> 00:05:59,800 So that's about it, we've improved the look of our site 135 135 00:05:59,800 --> 00:06:02,140 quite a bit just with doing these small changes, 136 136 00:06:02,140 --> 00:06:03,810 there's still a bunch more stuff that we have 137 137 00:06:03,810 --> 00:06:05,850 to change though, like this image, for example, 138 138 00:06:05,850 --> 00:06:07,630 we have to make that look a little bit nicer. 139 139 00:06:07,630 --> 00:06:09,360 So, thank you guys for joining me in this video. 140 140 00:06:09,360 --> 00:06:11,250 I hope you've enjoyed it, let's continue. 141 141 00:06:11,250 --> 00:06:12,753 I'll see you in the next one.