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