Original subtitles

It's time to flaunt your inner designer because we're about to learn some CSX to start off I want to

show you this Web site.

If you look at it well it's it's quite quite pretty.

Look at that.

That's really nice.

Now hopefully in the future we can create something like this.

But I want to show you what this Web site will look like without CSX.

Here it is

pretty impressive right.

With just CSX you'll be able to create something like this so let's get started to Shelly

I've created here for us a simple Web site.

Nothing that we haven't seen before.

You can see that I have created semantic tags with header nav an unordered list that has some links

a P two and a p tag that's wrapped in another semantic tag called section.

OK.

So again nothing crazy if I go to the about page its exact same thing except for the about ally doesn't

have an anchor tag.

And then same with log in OK.

So let's talk about CSX the way that we would add CSX to something like this is while we create a CSX

file so let's do that.

I'm going to create a new file that I'm going to save.

Let's call it style dot CSX if I save that you'll see at the bottom over here that sublime text now

has CSX as the file to the rules with CSX are very simple.

We essentially have a selector and then we have these squiggly brackets and within it we put our property

semicolon and then value.

Then we have this special character as well at the end and that is pretty much CSX.

You know this you can write CSX just like a Chanel just a couple of syntactic rules.

And once you get used to it it's very very simple.

But obviously this doesn't really mean anything so let's write actual code here.

I'm going to comment that out by again doing command slash and sublime text.

You can see that the commenting is different than an HMO and let's say that we want to make this home

text read the way we would do it is we want to select what's called the selector.

So here we want to say that the H2 we want that to be read.

So all I would say is each to curly brackets and then within here I want to say the property I want

to change the color to the value that is read so if I say that and refresh while nothing happens and

that's obvious right.

Because how does this file know that this file exists.

We have to link it somehow and we do that in the head and we haven't talked too much about the hash

tag element in the 80 mile section.

But by now you can probably tell that head just contains information about what the page needs maybe

not the stuff that we see on a web page other than the title but meta tags and information that we need

for the Web site.

So in here we can actually link to this style sheet that we call style that's SS with a link tag and

this link tag allows us to link this Asian mail file to something else.

And again so blind texts has something very useful here.

If I had tab look at that it auto fills it for me.

These are the standard attributes that you'll see to link to CSX.

So you just have to get used to it and eventually it'll become second nature.

So we have our yell here which is the added attribute for relation.

It just specifies what relationship this link will have and we'll have the default style sheet and then

for the type this is the media type you want to say that it's a text CSX file we're essentially telling

a simple Hey just a heads up we're linking to a CSX file here and in the ref.

This should be familiar.

We're going to link to style that CSX.

So if I type in style dot CSX and safe let's refresh turns red.

And just to let you know that index that e-mail is in the same folder as style that's ISIS.

We can check it over here if I click on exercise.

You see that.

Yep.

I have style.

That's the SS with index citation.

Perfect.

OK.

Now what if we also want to make the paragraph over here the separate color as well.

Well again we would do the selector and then we'll do color let's do pink I save refresh and it's pink.

Hopefully you can see that you also see here that sublime text does some really nice color ring for

us.

So five for example I put a property that doesn't exist like a misspelled color well you see that it

doesn't highlighted properly with the blue color and you know that you've made a mistake again another

great feature of sublime text so see what does it actually stand for.

Well it stands for cascading style sheets and style sheets.

That makes sense that you know we're creating style sheets but what does cascading mean cascading means

that it always takes the selector that is at the end and that's simplified terms but I want to demonstrate

for you what that means.

So let's say at the bottom over here I do this again paragraph I want Color to be Green Well if I save

this what do you think will happen.

Let's refresh and see it turns green and why is that.

Well because it's cascading.

It's saying OK I'll set H to to read OK I'll set paragraph to pink and then it says OK I'll set P. to

green so we can see here as it trickles down and cascades.

It takes the last input that it receives for a specific selector.

We'll get more into the cascading effects of CSX in a later video.

But I want you to understand the basic concept around it.

OK.

I also wanted to show you something cool they can do with Chrome and we did this in the first couple

of video series but now you'll actually understand what I mean.

So again view developer developer tools and from now on I'll be using this shortcut to open it and you'll

be able to do it as well.

And if you remember we have our style tab.

And if we click on the style tab we have the team on the left styles over here and nothing for the styles

but if I now go in to my home and I click on that I'll show you color red.

So Google Chrome or allows us to see our CSF styles so I can even add stuff here and I could say background

color and let's do black look at that.

So this is a really good way to play with your Web site and add colors.

You can check and uncheck here.

And also if you see something on a Web site that you really really like you can go to that element.

Let's.

Let's try it off here.

Let's go to weight.

But why dot.com and let's say that we really really want to know how this was made.

We can right click do inspect or take us exactly to that element.

And then we can see here some of the properties to assess properties that they've used same year.

I can see that the background color is this.

And so on and so forth.

Okay let's close that for now.

The last thing I want to leave you with is this closes.

What if I also want the about page to have stars and same with the log in page.

As you can see there's no style for these ones but we want the same thing for the about and log in page.

Well as you can imagine we copy the link tag and we go to about we link it onto here and then log in

we can again link it here.

I save both of these files and now if I refresh and go to about look at that we have our styles.

And you may be wondering well what if I want different styles from maybe for the logging.

I want this to be blue instead.

Well we can actually create multiple style sheets so I can say for example let's create a new file and

we'll call it style to dot CSX.

I save that and this time I'm going to say that I want my page to to have color blue I say that I go

in to my log in e-mail and now I'll make log in reference.

The second style sheet instead of the first one.

So now if I refresh log in is referencing our style to see SS but all the other ones are still referencing

the old one.

Okay I lied.

There is one has thing that I want to add and that is that this is the common way of adding styles but

there's actually two other ways that you won't see as often especially when you're starting off.

But I wanted to show it to you so that you're not surprised.

The first way of doing it is something called inline styles.

And this was the original way that we incorporated styles into our A.T.M. and that is by specifying

within the element let's say let's go with header over here.

We want to say style.

So it has a style attribute.

And then within here we can do background color must do green and refresh and we're at the about page

right now we changed that for index that I see and also let's go over here and look at that.

We have the green background and if you want to add more again we do color red.

Let's save and refresh and look at that.

The header has the color red and you'll see here that these ones are still purple wall because they

are linked tags and they have the default linking.

OK.

So that's one way.

And third and last way is in the head.

You can actually create stealth tax and then within these style tags you can enter CSX.

So if you just refresh here so we have a fresh clean slate I can now say to ally this time so all the

lists I want the lists to have background color of purple so how save this and refresh everything is

purple and that looks pretty yucky.

You can keep adding stuff on here and I guess a color white save refresh and it change the color to

white.

Now you may be wondering why don't we just do it like this.

This seems a lot simpler than linking to another CFS file.

Well the reason is that for this Web site everything is fairly small.

It's just a couple lines of CSF.

But you can imagine with Web sites as they get bigger and bigger you'll have hundreds and hundreds of

lines of CSX and having one massive file will be very very challenging to maintain.

You can also think of it as if you were working on an HMO and you also had a team of designers.

Now we're working on a CSX file.

You want to have a separation where you have some team members working on the CSX and then some team

members working on the HMO.

And that is a concept called separation of concerns and it's a fancy way of saying that everybody just

worry about what they're good at.

So HMO just worry about text and CSX just worry about styles.

This phrase separation of concerns is something that will encounter throughout later videos when we

get into javascript and react and it's a very very important concept in web development and computer

science in general.

So we will get back to that.

It'll be a phrase that will keep coming up.

So for now let's delete this.

Let's keep things the way that we have it.

Let's refresh and in the next video I'm going to show you a couple of CSX properties that are more exciting

than just color and background.

I'll see you that one by.