So let's talk about cascading style sheets for a little while.
So this is my reservationist e-mail page, which were eventually going to cut up into a Goldwing template.
If I look at the HTML for that page, I have all of these imports at the top.
So a link to a style sheet and then a style sheet on a remote server somewhere.
So if I copy that URL and open a new tab
and go there, you'll see that this is really hard to read because it's not formatted nicely.
But if I take the out of there, we can actually see what it looks like.
This is just.
So it's a bunch of directives that tell the browser how to to the page.
So, for example, if we look at this one input of type equals radio.
So that's just an input on a former radio button on a form.
It tells it to use border box, whatever that is, and put no padding around it in the same way.
Text area, which is another type of input on the form.
This has overflow auto and it resize is vertical, so it doesn't matter what those are.
If I go back to my HTML and delete that, let's say I just cut this edit here, I'm going to cut it
because I need to post it back in a minute.
I'm going to cut that, save the page, go back to my Web browser and reload this page.
All of that success is going to be gone.
And here's what it looks like.
It's pretty ugly.
Now, if I go back there and paste this back in and save it, go back and reload, it comes back.
So when you take that scissors out, it actually removes all of bootstraps formatting and just tries
to redo the page as best as it can.
So we wind up having a bunch of things like in our form.
If I go down here and look at the form we're building, which is somewhere in here, here when I have
this class form control, that's what makes this look so nice, actually.
Now this is the one that I'm creating dynamically.
So let's find the actual form here.
There it is right here.
If I take this out, class equals form control a cut that save it and go back and reload this page.
This one should change and it does.
OK, and if I put it back and save and reload, it looks the way they're supposed to.
So what I'm doing is just telling my web browser how to render the elements on the page, how to style
them.
And I have a fair bit of control over that sort of thing.
So right now, we have these things that we've added.
We've put it right into the page.
These ones are loaded off of a remote server.
These ones are embedded into my page now to clean things up because this gets kind of ugly and it takes
up a lot of space in the file.
I can actually create my own file.
So I'm going to look over here on the left hand side where it shows all the things I have this static
folder, and inside of that, all I have is an image folder with images in it.
And I'm going to create another folder directory and I'll call it access for style.
And inside of that, I'll create a new file, which I'll call Styles Access and I guess I'll edit to
get.
Then I'm going to go back to my reservation page and I'm going to cut this stuff out of here.
Not the style tags.
I don't want those.
In fact, I'm going to delete those and then I'll go back to the file.
I just created styles, desks and just paste in my directives.
Save those and I'll go back to my reservation page and just like I'm loading things remotely, so I'm
going to unpackaged dot com and loading Natixis, I can actually load local stuff as well.
So Link Rel equals stylesheet, which tells it what what we're linking to type is Texas.
It's a text and it's a cascading stylesheet.
And the trick in this case, I'm just going to go to my folder, static it inside of that I have a folder
called Access and inside of that I have a folder called Styles Dot System, which I've got a typewriter,
a lot work and I can save it.
So if I come back here now and reload this page, nothing should change and it doesn't.
But when I view the source now, I'm referring to that stylized access and that makes things much cleaner.
And the great thing about that, it means that I don't have to on every one of these pages, like a
boat, I have a Stiles here.
I can delete that.
I don't need it anymore and I can just paste in the same link that I have here.
Copy paste.
And I probably want all of these things, so I may as well just copy them all eventually they're going
to go into a layout template and CSS, but we'll copy them right now.
It's not going to hurt to do it.
So I'll put this and replace all of this with what I have in there.
Do the same thing for the contact page so I can get rid of all of this and pasted what I have in there.
Same thing for Generals'.
Go to the top there.
Replace all of this with my imports, my index page, replace all of this with my imports.
And finally, the major speech.
Now you can see hopefully why it's so convenient to have a layout in Goldwing templates.
Like we looked at a few lectures ago.
I don't have to make changes in one, two, three, four, five, six files.
I just make it in one layer.
But we'll get to that when we cut this up.
So now that I have these style.
So let's look at these for a second.
Let's go back to the reservation page.
That's the one we're working on.
And I'm going to look at the page.
And I have this.
This is some text.
I want to change the styling just for that.
So let's find that this is some text and already has an idea.
That's great.
But actually, I'm actually not going to use the idea to make this change.
I'm going to at the very top of this page, redefine the style.
So I'll put it in a style again, four paragraph text so I can actually change HTML elements like this
and I can say color red.
And if I save that and reload this page, this is a paragraph so it can change to red.
And it did.
And then if underneath that, if I create exactly the same thing but make color green, what's going
to happen?
Well, what I'm telling it here, first of all, I'm saying every time you see a paragraph to make the
text read and then immediately after that, I'm saying every time you see a paragraph tag, make the
color green.
What's going to happen if I love this?
Save reservation on Actimel, if I reload this, it's now green, and that's because I have overridden
the style and the order that cascading stylesheet directives appearance actually matters.
So this one says, yeah, make it red, but then immediately after it, I override that.
So now overwriting styles is incredibly helpful.
For example, I'm going to delete this because I don't want to write down the order matters.
The most recent directive, the last directive you give will always be the one that takes place.
Now, I'm here on this line.
I the important bootstraps style it which means if I do the import here and then after it, I override
those directives.
So we have a button here, for example, called Click Me and let's find out what that class's button
button primary.
Well, let's try changing it styles.
So first of all, I'm going to do it manually right in the browser.
I'm going to right.
Click on this button and choose inspect element, which is here somewhere.
There it is.
And that shows me in my inspector.
Here's my my button.
And down here it tells me what its directives are.
So this element button not disabled, not disabled, but let alone secondary.
This has a color.
Now, if I take that and change the color to green with no hashmark because it's just a directive green,
it changed it to green.
The click me is actually green if I change it to red and hit return.
Now it's red.
That means I can override this style.
So what I can do just to make things really easy is say copy this stuff.
So I'll copy everything that I see in here.
And I can do that probably just by clicking on this copy rule.
Right.
Click on it.
Just copy rule.
Go back to my HTML, which is right here and in my style tags I'm going to override bootstraps default
formatting so red I will change.
I'll just take that out entirely.
OK, so because I've taken that out entirely, it's the only thing I'm overwriting is the border color.
So if I save this and go back and reload the page, this should look exactly like boot straps default
style.
And it does.
Now if I say, well, let's change the the color and we'll choose, oh, we'll just choose one of these.
So we'll choose whatever that color is kind of a blue I think, kind of a sleek blue and go back and
reload the page.
It changes the color.
Hard to see that one.
Let's make one that's a little easier to see.
So I'll change the color too.
And I'll let my browser choose something that's easier to spot Aqua.
So I'll choose that save, reload.
And now it's Aqua.
So that's one thing you can do.
And it's really convenient.
If you don't like boot straps, default CSC, for example, I can actually change the access.
Now there's other ways of addressing things.
So far we've looked at a direct class.
We've looked at a direct tag like P, so one of the built in HTML tags, we can actually do it other
ways.
So the syntax, if I want to refer to every HTML element of a particular name, I can use P to get paragraph
tags or I can go div to get all dips.
OK, so that's how you refer to HTML elements.
If I want to refer to all elements of a particular class, this is the syntax I use.
I put a dot in front of the class name, so let's try that.
Let's come down here and find our paragraph wherever it is and we'll duplicate that a few times and
we'll get this.
Let's not duplicate the duplicate it once, get rid of the ID and instead put class equals and I'll
leave that NPF right now and I'll duplicate it three times.
So I have three paragraphs and I'll give the first one a class of para class and I'll leave the other
two empty.
OK, so if I come here right now, there is no class per class, so it just puts in some paragraphs
as well.
I can't find a class with any instructions, so I'm just going to ignore that declaration.
But if I come back up here and I called my class para class, I think.
Where is it?
There it is.
Yep, I now want to give some directions to that class, so I'm going to come up here and I'm going
to say dot class and I'll give it some directives.
So let's change the font size, font size.
And that can be a number.
Like 10 points or 25 pixels or three M's, let's leave three M's.
So what is going to do for any time it sees the class A class, it will change the font size to the
same size as three capital letter Ms.
As in Mary.
So I reload this and it should affect just one paragraph.
And it does.
But if I add that class to another paragraph like right here.
Class and reload the page now it affects, too, so you can affect multiple things by referring to a
single class name and I can also put two classes in there.
So I call it second class.
So now this paragraph, the one right after the first one with the ID has two classes.
So let's define some rules for the second class.
Which I will call because I want to go by classman starts with the DOT second class and we'll say color
red.
So now if I look at my formatting directives here, I have a paragraph with an idea.
So it just goes the default paragraph because I've done nothing with that clause.
In the second one, I said, give it the class of a class and the class of second class and the one
after it just has the class A class.
So what do you think's going to happen?
Well, let's find out.
Reload the page.
And this one, because it has two classes per class and second class applies all of the styling for
both of those classes to this text.
This one just has a class.
So it actually only gives the rules that are found in class.
Now, the third way to refer to things is by ID.
So I can say ID for this last paragraph is last para now to refer things to things, but ID use a different
syntax.
So here because I'm going by ID, I start with the hashmark and I called this one last para.
And now I can give some directions in there so I can say, well, it's a text declaration, there's
another one and the text declaration is going to be underlined.
So I'm referring to one element.
And because this is an idea, there should be one and only one element in the entire HTML with that
ID.
But I've told it, whenever you see the element with the ID of last page, give it an underline.
So let's do that.
And there it does.
It gives it an underlying.
So that is how CSC works.
And for our purposes right now, that is sufficient.
So all I need to be able to do at this moment is to refer to things by class, by HTML tag or by ID.
And as we go through the course of the lectures, we'll actually have a little more control to show
you how you can do things in a little more interesting ways.
For right now, I just want to be able to refer to things and make sure that you have an understanding
of how to select things by HTML, tag, by ID or by class, and to understand that in cascading style
sheets, the most recent directive, the last one you give your your page, that's the one that will
have effect, which allows us to override things like boot straps, default styling in the same way.
Nodi has a little thing that shows up at the top.
I can actually control how that looks as well and I can control Sweedler.
Pretty much anything that you display in a page, you have some control over the style.
All right.
That's it for Kath's for the moment, will be seeing that more regularly as we progress through the
remainder of the course.