1 00:00:00,760 --> 00:00:06,250 All right, so now that we've seen all the places where we can include CSS in order to change the 2 00:00:06,250 --> 00:00:12,490 style of our website, then now is a good time to review the CSS syntax. 3 00:00:12,760 --> 00:00:18,130 And you hear this word syntax a lot when you're dealing with programmers or programming, and all that 4 00:00:18,130 --> 00:00:21,460 it refers to is just the grammar of the CSS language. 5 00:00:21,820 --> 00:00:26,920 Just as in English, we have grammatical rules which state where you should put commas, where you should 6 00:00:26,920 --> 00:00:30,760 have full stops, which words need to be capitalized, et cetera, et cetera. 7 00:00:30,970 --> 00:00:34,900 All programming languages also have their own particular syntax. 8 00:00:35,290 --> 00:00:37,960 So let's take a look at what CSSes looks like. 9 00:00:39,250 --> 00:00:42,850 Now, the first thing that you'll see is the selector. 10 00:00:43,090 --> 00:00:45,970 And this comes at the beginning of the CSS rule. 11 00:00:46,270 --> 00:00:53,020 And then comes a pair of curly braces inside, which is where your CSS rules are going to reside. 12 00:00:53,290 --> 00:00:58,870 And the rule will change the appearance of some property and give it a new value. 13 00:00:59,140 --> 00:01:02,810 And each rule has to end with a semicolon at the end. 14 00:01:03,340 --> 00:01:08,320 And that is kind of equivalent to the full stops that we see in our English sentences. 15 00:01:08,500 --> 00:01:12,730 Essentially, the selector is basically just the who, 16 00:01:13,150 --> 00:01:17,020 so who is it that you want to modify in your web page? 17 00:01:17,050 --> 00:01:18,160 Is it the H1? 18 00:01:18,430 --> 00:01:20,290 Is it the paragraph tags? 19 00:01:20,530 --> 00:01:22,040 Is it the image tags? 20 00:01:22,060 --> 00:01:24,190 Whose style do you want to change? 21 00:01:25,030 --> 00:01:27,970 And the next part is the property. 22 00:01:28,150 --> 00:01:29,530 And this is the what. 23 00:01:30,160 --> 00:01:32,830 What about that H1 24 00:01:32,860 --> 00:01:33,940 do you want to change? 25 00:01:33,970 --> 00:01:35,410 Is it the background color? 26 00:01:35,440 --> 00:01:36,730 Is it the text color? 27 00:01:37,030 --> 00:01:38,170 Is it its position? 28 00:01:38,950 --> 00:01:41,380 And finally, we've got the value. 29 00:01:41,710 --> 00:01:48,400 And that is the how. So how do you want to change the background color of H1? 30 00:01:48,700 --> 00:01:50,350 Do you want it to be blue? 31 00:01:50,380 --> 00:01:51,760 Do you want it to be red? 32 00:01:52,180 --> 00:01:55,390 And that's the value that you're going to give in order to change it. 33 00:01:55,540 --> 00:02:00,490 So whenever you get stuck thinking about CSS, this is a good time point in the video to come back 34 00:02:00,490 --> 00:02:07,540 to you just to remind yourself what are each of the parts inside the CSS code that you are changing 35 00:02:07,840 --> 00:02:09,310 in order to affect the style. 36 00:02:10,210 --> 00:02:13,000 So let's look at a real life example. Here 37 00:02:13,000 --> 00:02:18,730 I have a website that is dedicated to the true love of my life, which is bacon. 38 00:02:19,150 --> 00:02:27,880 And all that I've got in this website is an H1 for the 'I Love Bacon' heading, and I've got three separate 39 00:02:27,880 --> 00:02:33,790 paragraphs that just say bacon, bacon, bacon, bacon, bacon, which is what I hear in my head most 40 00:02:33,790 --> 00:02:38,050 of the time, especially around lunchtime, which is right now. 41 00:02:38,620 --> 00:02:39,340 So, 42 00:02:39,430 --> 00:02:47,650 and finally, I've got an image of a piece of bacon. So if I decide to apply some CSS to my website 43 00:02:47,770 --> 00:02:52,420 say let's change the H1's color to the color red. 44 00:02:53,050 --> 00:02:58,360 Now, in this case, the who is, of course, the H1, that's what I'm trying to select, and that's 45 00:02:58,360 --> 00:02:59,560 why it's called the selector. 46 00:02:59,830 --> 00:03:01,840 And the color, of course, is the what, 47 00:03:02,200 --> 00:03:08,200 and finally, the how I'm going to change that color is the value, which in this case is red. 48 00:03:08,470 --> 00:03:14,650 And by applying CSS rule, I end up changing the h1's color property to red. 49 00:03:14,920 --> 00:03:22,300 Now let's take a look at that in real life. If you look inside the resources of this lesson, you will 50 00:03:22,300 --> 00:03:26,770 find a zip file called Bacon Fansite that you will be able to download. 51 00:03:27,130 --> 00:03:35,470 And once you unzip it and extract the files inside, you should find a folder called CSS - Bacon Fansite. 52 00:03:36,130 --> 00:03:38,710 Now, go ahead and take this folder 53 00:03:38,870 --> 00:03:46,780 CSS - Bacon fansite and drag it into your project sidebar right here below the other project. 54 00:03:47,650 --> 00:03:53,440 Now, if you want to get rid of the previous project, just click on the top, HTML project file 55 00:03:53,710 --> 00:03:57,820 and then remove Project Folder and ignore this DS_Store. 56 00:03:57,820 --> 00:04:01,230 This is something that just gets created automatically on macOS. 57 00:04:01,240 --> 00:04:04,690 You can delete it if you want to, but it doesn't actually do anything. 58 00:04:05,080 --> 00:04:10,330 So now you should have this index.html file in your Atom Project folder. 59 00:04:10,810 --> 00:04:18,430 And here I've already written a little bit of code in order to create the bare HTML bones of our bacon 60 00:04:18,430 --> 00:04:19,150 fansite. 61 00:04:19,510 --> 00:04:27,310 Now I know that some of you guys might be vegan or vegetarian or pescatarian or whatever it may be. 62 00:04:27,640 --> 00:04:35,620 If my love of bacon offends you in any way, then I am deeply apologetic and you can feel free to change 63 00:04:35,620 --> 00:04:43,040 or update this website to whatever it is that you worship like broccoli or spinach. 64 00:04:43,060 --> 00:04:43,450 But, 65 00:04:44,320 --> 00:04:46,300 my thing is bacon, so here we go. 66 00:04:46,930 --> 00:04:49,000 So here's the base website. 67 00:04:49,390 --> 00:04:57,400 And as the first challenge, I want you to pause this video and create a new folder called css 68 00:04:57,820 --> 00:05:02,230 inside which you will create a new file called styles.css, 69 00:05:02,800 --> 00:05:09,520 and then you're going to link that file to this current HTML file using an external link. 70 00:05:09,580 --> 00:05:14,650 So we're using external CSS. So pause the video and give it a go. 71 00:05:18,210 --> 00:05:18,540 All right. 72 00:05:18,570 --> 00:05:20,880 That shouldn't have been too hard. If it was, 73 00:05:20,910 --> 00:05:26,520 make sure you look at some of the previous videos where we spoke about inline, internal and external 74 00:05:26,520 --> 00:05:27,180 CSS. 75 00:05:28,290 --> 00:05:35,700 So the first thing I'm going to do is I'm going to create a new folder inside our CSS - Bacon fan 76 00:05:35,700 --> 00:05:40,610 site, and I'm going to call it cs. Inside the css folder 77 00:05:40,620 --> 00:05:43,950 I'm going to create a new file called styles.css. 78 00:05:43,950 --> 00:05:47,450 And now styles.css 79 00:05:47,450 --> 00:05:54,150 is inside a folder called css and the same hierarchical level at index.css. 80 00:05:54,570 --> 00:06:03,150 So I can go inside the head of this website and I can insert a link that has a relationship of stylesheet 81 00:06:03,570 --> 00:06:08,080 and the href is css/styles.css. 82 00:06:08,190 --> 00:06:08,650 . 83 00:06:09,360 --> 00:06:15,840 So now if I hit save and I can just check to make sure that it's actually been linked up by tapping 84 00:06:15,840 --> 00:06:21,060 into the body, changing the background color, which we've done before. And let's just change it to 85 00:06:21,570 --> 00:06:22,020 red. 86 00:06:23,010 --> 00:06:28,320 Let's go ahead and save everything, hit refresh and we can verify that it's all linked up and it's all 87 00:06:28,320 --> 00:06:28,890 working. 88 00:06:29,160 --> 00:06:32,190 Now, I don't really actually want to have a red 89 00:06:33,370 --> 00:06:36,970 background for my bacon website. Seems a little bit too fanatical. 90 00:06:37,300 --> 00:06:42,880 But instead, we're going to add that CSS rule that we saw earlier on when we changed the text color 91 00:06:43,210 --> 00:06:45,250 of the h1 to a red color. 92 00:06:45,610 --> 00:06:46,750 So first things first. 93 00:06:46,780 --> 00:06:48,010 Who am I trying to change? 94 00:06:48,550 --> 00:06:53,360 So of course, it's going to be the h1 in this case. I'm going to open a set of curly brackets, 95 00:06:53,590 --> 00:06:57,190 and then I'm going to add the property or the what. 96 00:06:57,520 --> 00:07:04,210 And in this case, it's of course the color property, and I'm going to change its value to red. 97 00:07:04,420 --> 00:07:11,890 And of course, remember that the CSS syntax requires that you close off the line with a semicolon. 98 00:07:13,150 --> 00:07:19,540 Now, all the paths that we've mentioned in the CSS syntax slides are really, really important. 99 00:07:19,930 --> 00:07:25,630 And sometimes you might forget or you might accidentally remove something and it will break the code. 100 00:07:25,870 --> 00:07:28,090 So let me show you what I mean. 101 00:07:28,750 --> 00:07:36,550 For example, if we forgot to put in that, then we can't differentiate between the what and the how. 102 00:07:36,550 --> 00:07:41,470 And it'll think that all of this is the what or the properties we want to change. 103 00:07:41,710 --> 00:07:43,870 So that doesn't work. 104 00:07:44,410 --> 00:07:53,110 And if you hit save, then the linter inside Atom will actually give you this error, saying it expected 105 00:07:53,110 --> 00:07:55,840 a colon on line 1 column 12. 106 00:07:56,230 --> 00:08:02,800 So you can see your lines and columns down here, and you can see that currently we're on line 1 column 107 00:08:02,800 --> 00:08:03,450 11. 108 00:08:03,460 --> 00:08:09,220 So this is line 1, column 12, and this is where it expected a colon. 109 00:08:10,150 --> 00:08:18,130 Now with the colon, if we refresh our website, you can see that it changed our h1 to have a red 110 00:08:18,160 --> 00:08:18,860 text color. 111 00:08:19,330 --> 00:08:21,190 But without that colo 112 00:08:22,660 --> 00:08:26,210 then you can see that it doesn't affect the style at all. 113 00:08:26,230 --> 00:08:28,510 It's not a valid CSS rule. 114 00:08:29,560 --> 00:08:36,940 So let's put that colon back in, and let's go ahead and add another rule to modify our h1. 115 00:08:37,240 --> 00:08:41,440 Let's change the font size to something really, really huge. 116 00:08:41,440 --> 00:08:43,630 Let's say 200 pixels. 117 00:08:44,350 --> 00:08:46,270 So let's hit save. 118 00:08:46,300 --> 00:08:47,450 Let's refresh. 119 00:08:47,470 --> 00:08:55,060 You can see we've got this massive title saying, I love bacon. So you can have more than one rule 120 00:08:55,330 --> 00:08:57,400 that's applied to the same selector. 121 00:08:58,060 --> 00:09:04,660 And very often you'll actually apply many, many rules to the same selector, and you can either have 122 00:09:04,660 --> 00:09:05,530 them in line. 123 00:09:05,680 --> 00:09:10,270 But as you can imagine, as you get more and more rules, you're going to run out of space pretty quickly. 124 00:09:10,600 --> 00:09:17,020 So by convention, most people will write CSS with the selector, the open curly bracket, 125 00:09:17,230 --> 00:09:21,520 then each CSS rule will go onto a new line 126 00:09:21,910 --> 00:09:27,160 and this way, you can clearly see and make sure that each line ends with the semicolon and each of 127 00:09:27,160 --> 00:09:31,630 the properties are separated from the values by a colon. 128 00:09:31,930 --> 00:09:38,350 Now there's another sort of best practice is that once you start getting a lot of these rules, say 129 00:09:38,350 --> 00:09:43,930 you know, 20 all in one paragraph, then it starts getting hard finding them. 130 00:09:44,380 --> 00:09:52,150 So usually the best practice is to keep all of these rules in alphabetical order. 131 00:09:52,330 --> 00:09:59,530 And in fact, if you put font size before color and you hit save, Atom will actually give you a 132 00:09:59,530 --> 00:10:07,840 warning telling you that the linter advises that the best practice is have all of your properties in 133 00:10:07,840 --> 00:10:09,040 alphabetical order. 134 00:10:09,370 --> 00:10:14,680 That way, when you come to debugging or trying to figure out what's going wrong, then it'll be much, 135 00:10:14,680 --> 00:10:18,670 much easier to find each and every property that you're looking for. 136 00:10:19,120 --> 00:10:27,310 Now, as you might have seen, it's quite easy to find the who because we're just looking at the HTML 137 00:10:27,310 --> 00:10:27,880 element, 138 00:10:27,940 --> 00:10:34,420 for example, the h1 tag, and we're simply ignoring the angle brackets of the tag, and we're just 139 00:10:34,420 --> 00:10:39,820 picking up on the name of the HTML element to use as our selector. 140 00:10:40,090 --> 00:10:48,190 Now, as a challenge, I want you to change the background of this bacon image to read as well. 141 00:10:48,850 --> 00:10:55,150 So take a look at the index.html and implement your CSS code inside style.css. 142 00:10:55,390 --> 00:10:57,730 So pause the video and give that a go. 143 00:11:00,320 --> 00:11:02,120 All right, so how did that go? 144 00:11:02,540 --> 00:11:11,210 Now, of course, the easy part is the who in this case, which is the image tag, and we're not including 145 00:11:11,210 --> 00:11:14,870 any of the other attributes like source or alt text, et cetera. 146 00:11:14,880 --> 00:11:20,420 We're just interested in that red part, which is the name of the HTML element. 147 00:11:20,930 --> 00:11:27,740 So we're going to go into our styles.css and we're going to target our selector, 148 00:11:28,160 --> 00:11:31,820 which is, of course, the image tag. 149 00:11:32,750 --> 00:11:37,190 Then we're going to open a set of curly braces and inside we're going to define our rule. 150 00:11:37,610 --> 00:11:40,280 And the property that I wanted you to change for 151 00:11:40,280 --> 00:11:42,920 the image was its background color. 152 00:11:43,100 --> 00:11:46,220 And we want to change it to red as well. 153 00:11:46,490 --> 00:11:49,370 So let's hit save and let's hit refresh. 154 00:11:49,460 --> 00:11:55,010 And you can see we've now got a bacon image that has a red background. 155 00:11:55,340 --> 00:12:01,670 Now, at this point, it seems easy to see how to find the who, right? 156 00:12:01,700 --> 00:12:04,910 The image or the P tag or the h1, 157 00:12:05,300 --> 00:12:12,320 whatever it is that you want to change, you simply use it as the selector inside your CSS code. 158 00:12:12,860 --> 00:12:17,090 Now what about the what or the properties? 159 00:12:17,390 --> 00:12:22,460 How do we know what keywords we can and can't use and what they will affect? 160 00:12:23,480 --> 00:12:28,340 Well, you guessed it, this is where we go back to the web docs. 161 00:12:28,880 --> 00:12:35,630 So if you have a look and on the MDN home page and you go to technologies and you go to CSS and 162 00:12:35,630 --> 00:12:41,780 then you go to their CSS reference, you can see that it talks about the syntax. 163 00:12:42,140 --> 00:12:50,300 But more importantly, it has this entire directory of keywords, which are effectively our properties. 164 00:12:50,540 --> 00:12:57,080 So these are the 'whats' that we can change. A and you'll find everything that we've used so far, 165 00:12:57,290 --> 00:13:02,810 for example, background color or font size or whatever it is that you're looking for. 166 00:13:03,140 --> 00:13:08,990 And these are all of the generic properties that you can change using CSS rules. 167 00:13:09,170 --> 00:13:15,890 And if you click on each of them, then it'll take you to a more detailed page where it shows you how 168 00:13:15,890 --> 00:13:22,130 you can implement the code and what different types of code will do for your styling. 169 00:13:22,400 --> 00:13:29,540 So have a play around with all of these different properties and see what other things you can do to 170 00:13:29,540 --> 00:13:34,280 make this Bacon fansite look more the way that you want it to. 171 00:13:34,790 --> 00:13:37,220 And once you're done, I'll see you on the next lesson.