Original subtitles

0 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.