All language subtitles for 036 The Anatomy of CSS Syntax.en_US

All right.

So now that we've seen all of 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 etc. etc.,

all programming languages also have their own particular syntax.

So let's take a look at what CSS 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 semi-colon at the end and that is kind of equivalent

to the full stops that we see in 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 the 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

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 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 web site 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 the 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 inside this folder there is a html file called index.html 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 knew 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 web site.

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 Fansite

and I'm going to call it CSS. Inside the CSS folder

I'm going create a new file called styles.css

and now styles.css is inside a folder called

css

and the same hierarchical level as index.html.

So I can go inside the head of this Web site 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.

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.

It's all working.

Now I don't really actually want to have a red background for my Bacon web site, seems a little bit

too fanatical.

But instead we're going to add that CSS rule that we saw earlier on where 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. We’re 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 semi-colon.

Now all the parts that we've mentioned in the CSS syntax lines 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 web site you can see that it changed our h1 to have a red text

color.

But without that colon 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 and 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 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 a semi-colon 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 red as well.

So take a look at the index.html and implement your CSS code inside styles.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 etc., 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 and we're going to target our selector

which is of course the image tag. Now 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 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 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 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 to do and once you're done I'll see you on the next lesson.