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 clients, we're going to be talking about in of type with CSS.

So basically what we're going to be doing is we're going to be automatically formatting HTML documents using a tool called of type, so this could be a very valuable and basically what this allows you to d'oh is it allows you to four Matt text again based off of certain rules.

So one of the big issues when you're creating large HTML documents is when people are trying to read the HTML document.

You can have a lot of information spread over a large area, and it can be very difficult for your users over your visitors to be able, basically understand and contextualize the information.

So one of the things you could do with format in your HTML document is basically be able to format text similarly, So it's easier for your your users, your visitors to be able to discern eso.

Think about this in the i o t world.

So a lot of what I'm teaching you is from that whole Iot T's perspective, Internet of things.

So you're going to be having a lot of sensors.

We're going to be having a lot of devices sending information to your server.

You're then going to parts that information and then be able to print out reports.

Well, one of the big issues, as you point out reports and again, with basic HTML, you can print out the reports.

They could be ugly and complicated and impossible to read.

But theoretically, all the information is there.

You say my job is not all the information is there.

My job is done and then you have the end users looking at just blobs of information, saying, How the hell do I use this on any interesting things you can do with inthe of type is basically again.

You can automatically format text based off of certain rules, so that it is much easier for the viewer to be able to discern what information goes with what you can think about this with things such as tables.

So if you have tables or one of the examples I'll show you is a list.

So imagine if every row in a list the entire row was a different color.

So one of the examples that I'm going to show you is one row is going to be blue, and then the next row is gonna be pink.

In the next row is gonna be blue, the next rose gonna be pink.

And so you have you have a list, or possibly if you have a table, it's very easy to then be able to see all of the information that goes together So you could do this with tables and lists.

You can do this with basic tags.

So basic P and a two or a tags.

You can do this with dip.

So, basically, if you have dibs and let's say you have you have different sections in your HTML document.

So maybe, like for like, chapters or for posts, you make the 1st 1 to make the 1st 1 have a background of white, and then the next one have a background of gray and the next one have a background of white and the next one have a background of Great.

So when I'm scrolling through the document, I could very easily see.

OK, this is one post and that's an Expos and this is a post.

Okay, this is the post that I want, right?

And so basically, this of type allows you to automatically format your text based off of some different rules.

So with that, let's go over to the computer.

I can show you how this works again.

It's one of those very simple things that you're just going to simply need to play with once I show you.

But this could be a very useful again, especially when I'm going to be doing things such as printing out HTML reports.

Here we are, back at my Mac book Pro that he used for the demonstration machine.

Today I used text edit in order to type out all the code again for these basic coding projects.

I like using an ass key text editor.

If you're in the Windows world, you can use no pad if you're in the macro and you can use text at it if you're in Lenox worldviews g et it nano vim or whatever.

Basically, you just need a simple text editor.

What?

You're gonna have to files at the end of this today one I've called in dot html.

So basically, this is the document that opens up in the web browser.

So that needs to have a dot HTM or dot html Suffolk ce on then the CSS style she is in style dot CSS and so that simply needs to be named dot C s s.

I'm going to show you the end result first, and then we're going to actually go take a look at the CSS just so you can get an idea of what the end result is supposed to look like before we actually take a look at the code.

And so here we have three different examples eso using this of type here.

What I've done is we can see that the even rose here are basically italicized and they have a background of yellow.

So imagine Imagine if you had a number of different basically, tags of some sort they may be P tags and might be H tags.

It might be something like that, and you just want to be able to differentiate.

So this is this.

This has the font One way.

The next one has a faulty at other way.

This has a fun one way.

This has a fun the other way.

This is a way that you could do that again.

So it's very, very easy to see if somebody is scrolling through the HTML document as they go through different sections.

So this is showing with an eight to tag using this end of type with an eight to tag again, you could do with an eight to tag a p tagging age one tag Whatever else Ah, here were yours and end with full dibs.

So, basically, again, this is where you can think about this is imagine these air entire blogger posts or entire article's something like that.

So you have the first def here that has a light gray background.

Then you go the next div that has a white background the next day have, like gray background, so on so forth.

So I put some H one data here and I put some p here.

So again, this this p here I only put this fragment of a sentence.

But again, this could be an entire blawg post again.

If somebody is scrolling through, it makes it very easy to differentiate between the different post on.

Then finally, at the end here.

This is an inthe example using a list.

So I have a basic order list here.

First item on the list again.

You can see it's blue across, then it's pink than its blue.

That is pink, that is blue.

Then it's pink.

And again, this this this gives you a visual representation.

So that's very easy to see the difference between the different items here.

And that's really what this end of type is going to do for you.

Let's go over and basically take a look at the HTML for this again.

There is nothing complicated with the HTML for this.

We opened up with the HTML tag we opened up with head tag we're going to do here is we're going to connect to the end style dot CSS.

So this is our style sheet again.

You either put the name of the style sheet in there.

If it isn't same folder as as the HTML document or you put the full file path.

If it's in a different folder, we closed the head and then we we open the body from here.

We have a tch one.

So this this is going to basically give us a title for each of these examples.

And I have given this a class of titles.

So we're taking a look here this class of title.

See how for the H one.

Basically, this has that that nice little border around it, basically, to try to differentiates like, Okay, this is a title.

This is a title.

This is a title.

That's all we're doing here.

So the h one.

You know, this is a basic example.

Then I have a whole bunch of different 82 tags here, so eight to stuff that's in an eight.

You tag to stuff that's in an eight to tech, right?

So, again, this is just an example basically dump information and then we're going to go down H one again.

This is still going to that class of title.

This is an example using the div tags and then All I've done here is basically of copy and paste it New Merced.

Numerous examples with a diff tag.

So we do.

The DIV class is going to equal in class and then I basically just copy and paste it at a number of different times.

Then we're going to go down again.

We're going to get that title again.

H one class of title.

This is an example using a list.

And so again, with this, we open up with the ol the order less tag.

We have item one all the way down to item six.

We close the order list, we close the body, we close.

He ate him out.

So you will see here.

There's nothing really complicated with this again we're using for the the H one.

We're using a title class for the dibs were using the end class, um, and someone and so forth and then with the other ones were basically just based off of the tags themselves.

I'll show you that in a second.

So let's go over and actually take a look at the style CSS.

So this is the actual style sheet, so you can see how this is all coded s.

So the first thing, right?

So as I said for these H one titles here, you should know how this works.

I talked about this in previous class, so we have dot title and basically we're going to have a border is going to be two pixels.

It's going to be solid and it's going to be black.

Basically, That then gives us thes title thes title classes right here.

Right, So two pixels, solid black.

Then we're going to go down.

Then we're going to get to the eight to inthe of type.

So basically, what we're going to say here is that the eighth to tag?

If we're going to have an eight to tag, we're going to do Colon.

We're going to do end of type.

And they were going to say for each, even one, So you can do even or odd here, So I'm gonna say for each, even once each repetition, that's even So the 2nd 1 the 4th 1 The sixth hole in the 8th 1 the 10th 1 the 20th 1 the 48th 1 We want the background of that to be yellow.

We want the font style to be italicized, right?

And so that's what we get here.

So the 2nd 1 is yellow and is italicized.

The fourth woman is yellow is italicized thesixty one is yellow and is italicized.

Just to show you how this works show that is currently even and you see how it is.

I can put this to odd.

I can do foot file I can put save And now we can see the odd ones are now going to be formatted that way.

So the 1st 1 the 3rd 1 the 5th 1 and the 7th 1 are now formatted that way.

So basically the even iteration when that tag pops up or the odd in oration When that tag pops up, that's what you can do here.

So it's just plugged us back to even again.

All we do is we do file, we do save.

And now we can see that the even it orations of when the H two tags show up.

That's what you get.

Then we're going to go down.

We're gonna take a look at the dip.

So basically with the Div, same type of thing.

So if we have a div tag, they were gonna do cold one, and we're gonna say end of type and then we're going to say, is the second basically the second iteration every 2nd 1 We want it to be format in this way.

So a background of a light gray And we want to start with the first iteration the first time this happened.

So if we take a look here, we can see what we have here.

So this plus wants you to have this plus one plus one means it will start on the first or the first woman is like gray and then passed that it will be every second the first ones like grey.

Then it goes toe white.

Then this one's like grey.

Then it goes to white.

This one's like grey.

Then it goes to white.

So one of things we can do here is we can say Let's say every third, right?

So every third iteration would you file?

We do save.

So we see how it is.

Now I go over and I do a refresh.

Now we can see that every third iteration.

So since his plus one, since it says start on the plus one, the 1st 1 Then +123 12 and then will be the next third, right?

We go here and we say four again, especially if we had a lot of these dibs.

You do four and then we can see For the plus one, it starts here than +1234 So on and so forth we don't have a plus one.

So we go back and we say, like two and we simply get rid of this.

Then it will simply happen on that generation.

Right?

So we go here, we hit refresh.

And so we see on the 2nd 1 So if it's just to end, is basically saying on the second generation So this will be white and this will be gray in the 2nd 1212 If we do plus one, it says, start the formatting on the first iteration.

And now if we hit, refresh and now starts on the first iteration.