NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,350 Hi guys and welcome back. 2 00:00:01,380 --> 00:00:04,680 In this video, let's style our microblog entries. 3 00:00:04,980 --> 00:00:06,090 So let's get to it. 4 00:00:06,610 --> 00:00:11,300 Here we've got the recent posts and we've got the title in there as well. 5 00:00:11,300 --> 00:00:17,350 So let's go over to home.html, and you can see that the recent posts is an h1 6 00:00:17,630 --> 00:00:22,710 and the "A bit of a chill day today" text here that we've got as an example is a h2. 7 00:00:23,050 --> 00:00:27,850 Remember that the contents of this text date and that the content of here is going 8 00:00:27,850 --> 00:00:31,689 to come from the users later on once we've set up our database and all that stuff. 9 00:00:32,049 --> 00:00:35,740 But for now, this is just to help us style the page, because this is 10 00:00:35,740 --> 00:00:38,680 the sort of stuff that we're going to have on the final page later on. 11 00:00:39,163 --> 00:00:41,203 So when we're making the changes here. 12 00:00:41,233 --> 00:00:46,723 We're going to use the CSS code there, but we first have to give these some classes. 13 00:00:47,083 --> 00:00:50,593 I'm going to give the article a class of "entry". 14 00:00:51,303 --> 00:00:56,053 The h2 is going to have a class of "entry__title". 15 00:00:56,440 --> 00:00:59,980 The time here is going to have a class of "entry__date". 16 00:01:00,226 --> 00:01:04,836 And the paragraph is going to have a class of "entry__content 17 00:01:05,411 --> 00:01:06,931 ". All right, we're going to leave the div. 18 00:01:07,121 --> 00:01:10,001 I don't think we need to style that at the moment. 19 00:01:10,451 --> 00:01:13,931 So let's go over to our CSS file and let's start. 20 00:01:14,111 --> 00:01:15,551 So we'll do the entry. 21 00:01:15,671 --> 00:01:17,711 We're going to have a margin-top of 50 pixels. 22 00:01:17,711 --> 00:01:20,441 We just want to separate it a little bit from everything else. 23 00:01:20,904 --> 00:01:25,074 And then the entry__title again forgetting the double underscore there. 24 00:01:25,574 --> 00:01:29,384 Here, we're going to make a change that you don't see made very often. 25 00:01:29,401 --> 00:01:33,061 We want to display the entry title on the same line as this time element. 26 00:01:33,091 --> 00:01:36,541 So what we're going to do is when I do display: inline and that 27 00:01:36,541 --> 00:01:38,281 is going to make it well inline. 28 00:01:38,461 --> 00:01:42,691 And because the time element is already inline, they now appear side-by-side. 29 00:01:42,961 --> 00:01:47,731 And remember an inline element just takes up as much space as its content needs. 30 00:01:48,011 --> 00:01:51,946 Whereas a block element takes up all the width of the container. 31 00:01:52,306 --> 00:01:55,856 So normally, heading level elements are display block, but 32 00:01:55,856 --> 00:01:58,676 now we're changing it to inline so that they appear side-by-side. 33 00:01:59,048 --> 00:02:02,138 The other thing we are going to do is we're going to adjust the font size. 34 00:02:02,498 --> 00:02:06,488 Notice that adjusting the font size doesn't mean that 35 00:02:06,518 --> 00:02:08,528 this is now less important. 36 00:02:08,608 --> 00:02:11,278 It just means that it looks a bit different but for a screen 37 00:02:11,278 --> 00:02:14,998 reader or any piece of software, this is still an h2, the second 38 00:02:14,998 --> 00:02:17,008 most important title of the page. 39 00:02:17,380 --> 00:02:20,560 I'm actually going to set it to 18 because I think that's the font 40 00:02:20,560 --> 00:02:23,950 size that we've gone for throughout the page, if I'm not mistaken. 41 00:02:24,250 --> 00:02:26,670 Then let's go over to the entry date. 42 00:02:26,730 --> 00:02:32,030 And what we're going to do is we're going to set the colour to 5c6b70. 43 00:02:32,340 --> 00:02:34,560 And that is this, light gray there. 44 00:02:35,060 --> 00:02:40,090 And then we're going to set the entry content to be font size 16 pixels. 45 00:02:40,110 --> 00:02:43,430 Just a little bit smaller and the line height is going to be 150%. 46 00:02:43,520 --> 00:02:47,810 So that is just going to separate the text lines a little bit. 47 00:02:48,310 --> 00:02:52,960 Something that we do want to add is a small thing between 48 00:02:52,940 --> 00:02:55,460 our title and our time element. 49 00:02:55,760 --> 00:02:56,900 And we're going to do that here. 50 00:02:56,930 --> 00:02:58,170 We're going to put it inside the time element. 51 00:02:58,190 --> 00:02:58,940 It's okay to do that. 52 00:02:59,360 --> 00:03:03,800 And just a small separator there, so that it's a bit easier to tell the difference 53 00:03:03,800 --> 00:03:05,780 between the title and the actual date. 54 00:03:05,920 --> 00:03:09,220 If you want to copy this element so you can put it into your HTML. 55 00:03:09,340 --> 00:03:12,190 I'm going to leave a link to where you can copy it from in the 56 00:03:12,190 --> 00:03:13,420 resources section of this lecture. 57 00:03:13,510 --> 00:03:14,230 So you can check it out. 58 00:03:14,780 --> 00:03:16,490 All right, that's everything for this video. 59 00:03:16,520 --> 00:03:19,340 Again, adding some more spacing and changing font sizes and 60 00:03:19,340 --> 00:03:20,210 colours and stuff like that. 61 00:03:20,240 --> 00:03:22,640 The usual thing that we do with CSS. 62 00:03:23,030 --> 00:03:26,060 In the next video, we're going to learn about the footer and how we can make 63 00:03:26,060 --> 00:03:29,600 those changes because obviously at the moment it ain't looking so good. 64 00:03:29,840 --> 00:03:31,400 So let's do that in the next video. 65 00:03:31,580 --> 00:03:32,270 I'll see you there.