Name: CSS and HTML 5 - nth-of-type Formatting
Uploaded: 2020-03-26T05:51:13.000Z
Duration: 20 min 53 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

To-infinitive

Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

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

Present continuous

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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

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

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.

Subtitles ListPlay Video

CSS and HTML 5 - nth-of-type Formatting

entire

obvious

subtle

basically