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