Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli the computer guy dot com.

Welcome back.

As you know, I am Eli the computer guy.

And in today's class, I'm going be showing you how to add your C S s formatting onto an HTML document.

So CSS is very nice because it is a way that you are able to basically format eight email text and be able to reuse that formatting on multiple different pages.

So this could be very important.

Imagine something like a content management system, something like a WordPress site.

And so if somebody's writing, blawg posts right, that one website may have hundreds or thousands of different HTML pages, and you want the text to all look the same across all of those pages.

If you had to simply write out the CSS on each individual page, then if you ever needed to modify the CSS.

That means you'd have to go back to 100 or 1000 different pages and be able to mock a man, really modify it in all those different pages.

Well, one of the nice things about CSS is you can have something called an external style sheet.

So basically within your HTML document within the head of the female dog document, you can reference an external style sheet where all your CSS styling is.

And then everything that is printed out in your HTML document in the Web browser will use the formatting from that external CSS style sheet.

So that's one very useful things that CSS offers you.

But it is important, understand, when you're going to be interacting with CSS.

There's actually three different ways in order to bring the CSS styling into your Web page.

The first way that a lot of people know about is again that external style sheet.

You have a style sheet where all of the CSS is written out, and then simply whenever the Web pages displayed, the Web browser will go to that style sheet C with the H one tagged the image tag.

All those things are supposed to look like, and then that's what will be presented to the end user.

But you also can actually add C S s to the head of an HTML documents.

You can use something called the style tag and actually add a whole bunch of CSS to the head of the document.

Uh, let's say you have a web page that is only gonna be one a single web page.

You don't want to deal with an external style sheet for For whatever reason, you can actually dump it all into the head beyond that.

The third way you can add CSS to your HTML document is, in fact, in a line, eh?

So it looks a lot like the old html four formatting.

Look where you do whatever tag you're gonna D'oh the p tag VH one tag Whatever else, then you do space, and right after that, you do style equals.

And then you put in all of the properties and all the CSS values that you want for whatever goes between between the tags that you're creating on, then that will form at the the HTML that way s oh, there are three different ways that you were able to add CSS to your document.

Now it is important to understand this, and it's important to also understand that you can use all three ways of doing CSS actually at the same time.

So let's say you want certain defaults for for your website, but you don't want to define every single thing about how far or how text will be formatted on your website.

So let's say you want all of the text on your website to be a certain font, but you're not necessarily going to say what color it should be or something like that.

What you could actually do is you could have an external style sheet, and all that external stress style she will do is define what the fonts are for whatever gonna be printing out on your came out documents.

So Miranda or aerial or times new Roman or whatever else.

So you may just simply say I wanted to be this font.

Maybe I wanted to be the size and leave it at that.

Then what you can do is then you can add CSS to the head of your page to possibly flesh out what you've already put in that external style sheet.

So for this particular patient, not only do I want everything coming in from that external style sheet, but I also want to text to be this color.

And I wanted to have this border so on and so forth.

And then one of the things that you could do is then in a line.

Then what happens is you can actually add additional C S s.

So you can say OK, this text that is Ariel from me at the external style she that is, you know, 40 pixels from the external style sheet.

That is whatever color I said in the head of this document.

Now here I wanted to be underlying so in the line.

I can then add that I want this particular text to be underlined and all of those things come together and now the text will be formatted.

It will be Ariel.

It'll be 40.

It'll be a certain color and it will be underlying.

They all come together to give you that formatting so you can use all three different types of actually being able to bring CSS end.

Now it is important.

Understand that the lower levels of CSS can overwrite the higher levels of C.

S s.

So let's say, in the external style sheet you set colors.

You set certain values that, for whatever reason, you want to negate down at the line level.

So literally what you could do is you would basically overwrite those values at the line level.

So let's say you put the font as again Ariel in that external style sheet.

Well, then in line.

You could actually set the font for the tag in that particular line as New Times, Roman.

And that would actually overwrite what you put into the external style sheet.

So basically, the things on the lowest levels trump everything else.

So whatever you put in line that will trump what's in the head of the document.

And that will trump what's in the external style sheet.

If you put something in the head of the document that will trump what's in the external style sheet, so basically having an idea of how this works could be pretty valuable, and so this is what I'm going to be explaining to you how to do today.

I'm gonna be showing you how to add your CSS into your HTML documents.

As with everything in this world, it's really simple as long as you type out everything properly and you don't think fat finger anything.

So here we are at my demonstration computer again, I'm using a Mac book pro, and I'm using text edit in order to write out the CSS again for a CSS and HTML.

All you need is an asking text editor.

So if you're in the Windows world, you can use no pad again in the Max Macro.

Deacon just texted him.

In the Lenox world, you can use G edit them nano or whatever else again.

I just do this because I think it's I think it shows people how easy it is to be able to write this coat.

Now I'm gonna be showing you a lot of things today.

So if you get confused, please do a reference of the examples.

Basically, all of these examples will be printed at Eli, the computer guy dot com.

So if you get confused, even you don't get confused, I would highly recommend you actually take a look at the at.

The examples actually printed out Eli, the computer guy dot com Then I think everything will make a lot of sense to you again.

I'm having to dump a lot of text at you.

And if you print things improperly, it won't work.

So actually, being able to see this when you're typing out your code, I think will be valuable.

But let's walk through this s o.

The first thing that I'm going to show you is an example of inline C s s.

So this is where we put CSS in actual line.

So again we're here.

We're calling the H one tag, and then we're saying what this style should be S o for this.

I've simply called this in line CSS dot html So it is important with us.

This is a dot HTM or dot html document.

So when we open this up in a web browser, it'll actually just simply open up again as an HTML document.

So here what we have again, I've stripped out all the other tags like I do in a lot of projects so that you can simply see what I'm showing you again.

If you're actually writing a normal document, you should you should write everything out properly, but here we go.

So we have the H one tag, then what we're going to do for the inline C S s styling is we're going to say style equals and they're going to double quotation marks on.

Then what we're going to do is we're going to put in the properties and the values of how we want this text within the H one tag to be styled eso for this, we're going to say text hyphen, a line colon, a center.

So we want to align this text to the center.

And then again, we going to do semi colon.

So we remember that delimited eliminators.

Whenever you're dealing with CSS, make sure to put that semi colon end or things won't work.

And so that's the first.

So that's that's the first value and property.

Then we want the colors on with the color to be read.

So color colon red and then again, even for the end one, we're going to do the semi colon.

Then we're going to close the double quotation marks.

Then we're going to close that side of the tag.

We're going to print out the text that we want to print out and then we're going to close the H one tag.

We go over here, we find in line CSS dot html and we double click on it.

And there we go.

That's basically all there is to it.

So this is in line CSS again.

Text hyphen, Align to the center so we can see It's a line in the centre.

Color is red.

We can see that it's red.

So that is how you do inline C s s.

So for a lot of you folks out there, if you're not actually building websites, let's say you're doing things like maintaining WordPress blog's or whatever.

This may be how you interact with a lot of CSS, right?

So you most likely if you're not actually administering the full sight or doing a lot of work on the full sight.

Ah, lot of times you're not actually gonna be modifying the external style sheet that you know that's gonna be the master of style sheet.

So a lot of times, what you're going to do if you just need to do simple tweaks on a page again on a block post or on a page, a lot of times.

The way that you're going to do that is simply with this in line CSS suits.

If we do style equals double quotation, then you're going to put the values and such here, that you're going to close the double quotation.

And then that is what's going to show up for the HTML document.

Now, from there, let's go and actually take a look at what's in the head.

So if we go to the on page C S s.

So this is when you do see s CSS and all of the CSS is actually in the head of the document.

So if we go down here and we actually look at when the HTML text is printed out, we can see that these air clean tags So it's simply the h one.

Tag it simply p tag.

There's no additional CSS down here.

The reason is is because these tags are referencing what you have put in the head of the document.

So this is on Page C.

S S s.

So you open up the HTML here, You then open up the head tag.

You then open up the style tag.

So basically, what is between the opening and the closing of the style tag.

This is This is where you're gonna put your CSS formatting.

It's over here.

What I've done is I've said the body tag.

So this is called the selector.

But basically the body tag.

I want the background color, background, hyphen color.

I want that to be a yellow.

Then for the h one.

I want that color to be orange again.

Do you remember the delimit er that I want to align h one to center?

Then I want to go down to the P.

I simply won't make the fought size here.

I'm gonna make the font size here 30 pixels again.

Use the dilemma, ter, that I'm going to close the squiggly brackets and then I'm going to close the style tag that I'll close the head tag.

I'll open the body tag.

And so that body tag is going to take on the attributes that I coded up here.

Then I'm going to print out a tch one on paid CSS and then I'm going to print out with P.

Is an example of on pay CSS.

I'm going close the body.

I'm going to close the HTML So we go over and again, we just simply double click on on Page C S s.

So again, this is on page C s s dot html.

So this is still on a T.

M or HTML file.

If we double click on this apps what clicked on the wrong one?

If we double click on this, then we can see.

Okay, so on page C.

S s, we can see the background is yellow.

We can see that the H one text it is orange on.

It is centered on the page and we can see that the p the p tag that is in that like that 40 pixels or that 30 pixels that I showed you before So we can go here.

Let me just bring this up again.

And so again, life we take a look.

So we have the style.

So we create the body here body background, hyphen color is yellow so you can see the background color is in fact, yellow.

We go to the H one tag color is orange, so we can see that the color for the H one tag is orange text hyphen.

A line is center and we can see that it's centered the P tag.