All right, so now that we've seen all the places where we can include CSS in order to change the
style of our website, then now is a good time to review the CSS syntax.
And you hear this word syntax a lot when you're dealing with programmers or programming, and all that
it refers to is just the grammar of the CSS language.
Just as in English, we have grammatical rules which state where you should put commas, where you should
have full stops, which words need to be capitalized, et cetera, et cetera.
All programming languages also have their own particular syntax.
So let's take a look at what CSSes looks like.
Now, the first thing that you'll see is the selector.
And this comes at the beginning of the CSS rule.
And then comes a pair of curly braces inside, which is where your CSS rules are going to reside.
And the rule will change the appearance of some property and give it a new value.
And each rule has to end with a semicolon at the end.
And that is kind of equivalent to the full stops that we see in our English sentences.
Essentially, the selector is basically just the who,
so who is it that you want to modify in your web page?
Is it the H1?
Is it the paragraph tags?
Is it the image tags?
Whose style do you want to change?
And the next part is the property.
And this is the what.
What about that H1
do you want to change?
Is it the background color?
Is it the text color?
Is it its position?
And finally, we've got the value.
And that is the how. So how do you want to change the background color of H1?
Do you want it to be blue?
Do you want it to be red?
And that's the value that you're going to give in order to change it.
So whenever you get stuck thinking about CSS, this is a good time point in the video to come back
to you just to remind yourself what are each of the parts inside the CSS code that you are changing
in order to affect the style.
So let's look at a real life example. Here
I have a website that is dedicated to the true love of my life, which is bacon.
And all that I've got in this website is an H1 for the 'I Love Bacon' heading, and I've got three separate
paragraphs that just say bacon, bacon, bacon, bacon, bacon, which is what I hear in my head most
of the time, especially around lunchtime, which is right now.
So,
and finally, I've got an image of a piece of bacon. So if I decide to apply some CSS to my website
say let's change the H1's color to the color red.
Now, in this case, the who is, of course, the H1, that's what I'm trying to select, and that's
why it's called the selector.
And the color, of course, is the what,
and finally, the how I'm going to change that color is the value, which in this case is red.
And by applying CSS rule, I end up changing the h1's color property to red.
Now let's take a look at that in real life. If you look inside the resources of this lesson, you will
find a zip file called Bacon Fansite that you will be able to download.
And once you unzip it and extract the files inside, you should find a folder called CSS - Bacon Fansite.
Now, go ahead and take this folder
CSS - Bacon fansite and drag it into your project sidebar right here below the other project.
Now, if you want to get rid of the previous project, just click on the top, HTML project file
and then remove Project Folder and ignore this DS_Store.
This is something that just gets created automatically on macOS.
You can delete it if you want to, but it doesn't actually do anything.
So now you should have this index.html file in your Atom Project folder.
And here I've already written a little bit of code in order to create the bare HTML bones of our bacon
fansite.
Now I know that some of you guys might be vegan or vegetarian or pescatarian or whatever it may be.
If my love of bacon offends you in any way, then I am deeply apologetic and you can feel free to change
or update this website to whatever it is that you worship like broccoli or spinach.
But,
my thing is bacon, so here we go.
So here's the base website.
And as the first challenge, I want you to pause this video and create a new folder called css
inside which you will create a new file called styles.css,
and then you're going to link that file to this current HTML file using an external link.
So we're using external CSS. So pause the video and give it a go.
All right.
That shouldn't have been too hard. If it was,
make sure you look at some of the previous videos where we spoke about inline, internal and external
CSS.
So the first thing I'm going to do is I'm going to create a new folder inside our CSS - Bacon fan
site, and I'm going to call it cs. Inside the css folder
I'm going to create a new file called styles.css.
And now styles.css
is inside a folder called css and the same hierarchical level at index.css.
So I can go inside the head of this website and I can insert a link that has a relationship of stylesheet
and the href is css/styles.css.
.
So now if I hit save and I can just check to make sure that it's actually been linked up by tapping
into the body, changing the background color, which we've done before. And let's just change it to
red.
Let's go ahead and save everything, hit refresh and we can verify that it's all linked up and it's all
working.
Now, I don't really actually want to have a red
background for my bacon website. Seems a little bit too fanatical.
But instead, we're going to add that CSS rule that we saw earlier on when we changed the text color
of the h1 to a red color.
So first things first.
Who am I trying to change?
So of course, it's going to be the h1 in this case. I'm going to open a set of curly brackets,
and then I'm going to add the property or the what.
And in this case, it's of course the color property, and I'm going to change its value to red.
And of course, remember that the CSS syntax requires that you close off the line with a semicolon.
Now, all the paths that we've mentioned in the CSS syntax slides are really, really important.
And sometimes you might forget or you might accidentally remove something and it will break the code.
So let me show you what I mean.
For example, if we forgot to put in that, then we can't differentiate between the what and the how.
And it'll think that all of this is the what or the properties we want to change.
So that doesn't work.
And if you hit save, then the linter inside Atom will actually give you this error, saying it expected
a colon on line 1 column 12.
So you can see your lines and columns down here, and you can see that currently we're on line 1 column
11.
So this is line 1, column 12, and this is where it expected a colon.
Now with the colon, if we refresh our website, you can see that it changed our h1 to have a red
text color.
But without that colo
then you can see that it doesn't affect the style at all.
It's not a valid CSS rule.
So let's put that colon back in, and let's go ahead and add another rule to modify our h1.
Let's change the font size to something really, really huge.
Let's say 200 pixels.
So let's hit save.
Let's refresh.
You can see we've got this massive title saying, I love bacon. So you can have more than one rule
that's applied to the same selector.
And very often you'll actually apply many, many rules to the same selector, and you can either have
them in line.
But as you can imagine, as you get more and more rules, you're going to run out of space pretty quickly.
So by convention, most people will write CSS with the selector, the open curly bracket,
then each CSS rule will go onto a new line
and this way, you can clearly see and make sure that each line ends with the semicolon and each of
the properties are separated from the values by a colon.
Now there's another sort of best practice is that once you start getting a lot of these rules, say
you know, 20 all in one paragraph, then it starts getting hard finding them.
So usually the best practice is to keep all of these rules in alphabetical order.
And in fact, if you put font size before color and you hit save, Atom will actually give you a
warning telling you that the linter advises that the best practice is have all of your properties in
alphabetical order.
That way, when you come to debugging or trying to figure out what's going wrong, then it'll be much,
much easier to find each and every property that you're looking for.
Now, as you might have seen, it's quite easy to find the who because we're just looking at the HTML
element,
for example, the h1 tag, and we're simply ignoring the angle brackets of the tag, and we're just
picking up on the name of the HTML element to use as our selector.
Now, as a challenge, I want you to change the background of this bacon image to read as well.
So take a look at the index.html and implement your CSS code inside style.css.
So pause the video and give that a go.
All right, so how did that go?
Now, of course, the easy part is the who in this case, which is the image tag, and we're not including
any of the other attributes like source or alt text, et cetera.
We're just interested in that red part, which is the name of the HTML element.
So we're going to go into our styles.css and we're going to target our selector,
which is, of course, the image tag.
Then we're going to open a set of curly braces and inside we're going to define our rule.
And the property that I wanted you to change for
the image was its background color.
And we want to change it to red as well.
So let's hit save and let's hit refresh.
And you can see we've now got a bacon image that has a red background.
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 it is that you want to change, you simply use it as the selector inside your CSS code.
Now what about the what or the properties?
How do we know what keywords we can and can't use and what they will affect?
Well, you guessed it, this is where we go back to the web docs.
So if you have a look and on the MDN home page and you go to technologies and you go to CSS and
then you go to their CSS reference, you can see that it talks about the syntax.
But more importantly, it has this entire directory of keywords, which are effectively our properties.
So these are the 'whats' that we can change. A and you'll find everything that we've used so far,
for example, background color or font size or whatever it is that you're looking for.
And these are all of the generic properties that you can change using CSS rules.
And if you click on each of them, then it'll take you to a more detailed page where it shows you how
you can implement the code and what different types of code will do for your styling.
So have a play around with all of these different properties and see what other things you can do to
make this Bacon fansite look more the way that you want it to.
And once you're done, I'll see you on the next lesson.