It's time to flaunt your inner designer because we're about to learn some success.
To start off, I want to show you this website, 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
website will look like without success.
Pretty impressive, right, with just success, you'll be able to create something like this.
So let's get started to Shelly.
I've created here for us a simple website, 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 PITA and a P tag that's wrapped in another semantic tag called section.
OK, so again, nothing crazy.
If I go to the Web page, it's the exact same thing except for the about Elai doesn't have an anchor
tag and then same with login.
OK, so let's talk about success, the way that we would add success to something like this is while
we create a successful 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 success.
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 success are very simple, we essentially have a selecter.
And then we have these squiggly brackets, and within it we put our property.
Semicolon and then value, and then we have this special character as well at the end, and that is
pretty much success.
You know this you can write access just like a GML, 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 in HTML.
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 two we want that to be read.
So all I would say is H 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.
And refresh, well, 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 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 or the website.
OK, so in here, we can actually link to this stylesheet that we call style that comes with a link
to.
And this link tag allows us to link this ASML file to something else, and again, so biotech's 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 success, so you just have to get used
to it and eventually become second nature.
So we have our yelle here, which is the ad Ambatovy for relation.
It just specifies what relationship this link will have.
And we have the default style sheet.
And then for the type this is the media type.
We want to say that it's a text file.
We're essentially telling e-mail, hey, just a heads up we're linking to access file here and then
the ref.
This should be familiar.
We're going to link to Starbucks.
So if I type in style dot coms.
Turns red, and just to let you know, that index, that e-mail is in the same folder as style that
counts, we can check it over here if I click on exercise, you see that?
Yep.
I have style that success with the index citation.
Perfect.
OK, now what if we also want to make the paragraph over here, this Hypercolor as well?
Well, again, we would do The Selecter and then we'll do Caulder and 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 coloring for us, so if I for example, I
put a prop. that doesn't exist like a misspelled color, well, you see that it doesn't highlight it
properly with the blue color.
And you know that you've made a mistake.
Again, another great feature of sublime text.
So success, what what does it actually stand for?
Well, it stands for cascading style sheets and style sheets.
That makes sense that we're creating style sheets.
But what does cascading mean?
Well, cascading means that it always takes the selecter.
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 two to read, OK?
I'll set paragraph to pink.
And then it says, OK, I'll set P to green so you can see here as it trickles down and cascades, it
takes the last input that it receives for a specific selecter.
We'll get more into the cascading effects of success 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 credit.
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 you click on the style tab, we have the room on
the left, stools over here and nothing for the styles.
But if I now go into my.
Home and I click on that, it'll show you color red.
So Google Chrome, which allows us to see our styles so I can even add stuff here and I could say background
color.
Let's do black.
Look at that.
So this is a really good way to play with your website and add colors you can check and uncheck here.
And also if you see something on a website that you really, really like, you can go to that element.
Let's let's try it off here.
Let's go to.
Wait, but why dotcom?
And let's say that we really, really want to know how.
This was made we can right click.
Will take us exactly to that element and then we can see here some of the properties, the properties
that they've used.
And same here, you can see that the background color is this and so on and so forth.
OK, let's close that for now.
The last thing I want to leave you with is what if this closes?
What if I also want the above page to have stars?
And same with the login page.
As you can see, there's no style for these ones, but we want the same thing for the about and login
page.
Well, as you can imagine, we copy the link tag.
And we go to about.
We link it on to 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 for 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 success.
I say that.
And this time I'm going to say that I want my to.
To have color.
I say that I go into my login e-mail and now I'll make login reference the second stylesheet instead
of the first one.
So now if I refresh.
Log-in is referencing our style to excess, but all the other ones are still referencing the old one.
OK, Ally, there is one last thing that I want to add, and that is that this is the common way of
adding styles.
But there is actually two other ways that you won't see us 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
incorporate as styles into our e-mail, and that is by specifying within the element, let's say let's
go with head over here.
We want to say style.
So it has a style attribute.
And then within here we can do background color.
Let's do green and refresh, and we're at the about page right now, we change that for index that I
assume 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 because they are linked tags and they have the
default linking.
OK, so that's one way.
And the third and last way is in the head.
You can actually create style tags and then within these style tags.
You can enter CCWs, so if you just refresh here, so we have a fresh, clean slate, I can now say
all the P tags.
All right, let's do Elai this time.
So all the lists I want the lists to have background color of purple.
So if I save this and refresh, everything is purple and that looks pretty yucky.
You can keep adding stuff on here and I can say color white, save refresh.
And it changed 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 case file.
Well, the reason is that for this website, everything is fairly small, is just a couple of lines
of success.
But you can imagine with websites, as they get bigger and bigger, you'll have hundreds and hundreds
of lines of success.
And having one massive file will be very, very challenging to maintain.
You can also think of it as if you are working on an e-mail and you also had a team of designers that
were working on a case file.
You want to have a separation where you have some team members working on the success and then some
team members working on the e-mail.
And that is a concept called separation of concerns.
It's a fancy way of saying that everybody just worry about what they're good at.
So ASML just worry about text and assess.
Just worry about.
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.
But, you know, that will 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 Texas properties that are more exciting than just color and background.
I've seen that one by.