Name: CSS and HTML 5 - Classes in CSS
Uploaded: 2020-03-26T05:57:46.000Z
Duration: 14 min 45 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 class and going to be teaching you about classes within CSS.

Basically, what classes allow you to do is it allows you to format different types of HTML text in a similar fashion.

So one of the important things is whenever you're going to be creating an HTML document, whether it's for a Web application for four or four website ah, lot of times you want your text to look similar based off of whatever topic you're talking about.

So let's say I was going to be able to build a website for aligned the computer guy.

Now all of the text of that pertains to me, pertains possibly to the company and do the brand.

Let's say I want all of that text to look similar.

I want that text to have the same a font.

Maybe I want that text to have some other similar attributes.

So whether I'm using the 8th 1 tagged the age six tag or the P tag regardless of what tag I'm using, I want the color to be the same.

I want the fun to be the same, so on and so forth.

Let's say at different places places I referenced a legalistic term, so things like terms of service.

So whenever I talk about terms of service or anything legal, let's say I want that text to look similar.

So when somebody is is basically scanning through your HTML document, it's very easy for them to say OK, this looks like branding text.

Whether it's eighth wonder whether it's P and O, this looks like legal text again, whether it's H one or whether it's people.

S s were able to create classes and basically what you do with these classes.

This is how I want the text to be formatted.

Anything with this class will have this color will have.

This font will be underline, bold and whatever else.

And so basically, what you can then do is as you're writing out your HTML code when you use a tag.

So now when you use a tag instead of it's simply using an H one tag or a P tag or whatever else you can do it, H one tag class equals and basically put the name to whatever class you created.

And now what that means is that text that you will write out in HTML that will then inherit all of the formatting that comes from that class.

And when you're writing that HTML document, anything that has to do with your brand, it will be in your color of your choosing in a specific font, that type of thing, anything that has to do with legal stuff that will be an entirely different fun again.

This is one of those things that you could do for user experience to make it easier for your users to be able to use your website and understand what's going on.

So with that, let's go over the computer and I can show you how classes work within CSS.

So here we are at my demonstration system again, I'm using a Mac book pro.

And to write this out, I'm using text at it again with CSS and HTML.

You can use a simple asking text editor, so if you're on windows, you can use note pad.

If you were in Mac, you can use text at it.

If you're in Lennox, you can use g et a nano them whatever you want.

I'm simply doing this to make life easier.

So this is the actual file that we will open on view.

And then I have created a style sheet class style dot CSS on that's the style sheet back here again, as I thought about before.

With the style sheets, you can have multiple different style sheets in a website.

You can name them more or less whatever you want, as long as it ends with dot CS es eso for me as I'm doing these different projects.

I will name the style sheets different things just so we can know the difference between the different style shoots eso here.

So the first thing that we have for this isn't again underclass dot html.

So the HTML document has to end with either dot HTM or dot html.

We're going to open the HTML we're going to open the head on, and then we are going to a link to the style sheet.

So as I talked about before the previous class, all you do here is your this tag link.

And then this is the location of the style sheet that were pointing at.

So since this style, she is in the same A folder, a document that we're opening.

I can simply put the name of the style sheet there.

If this was in a different folder, then you have to put the full path to get there as we talked about before then we had a little forwards last year and thing here, and then we close this and then we close the head.

So with that, let's go over and actually take a look at the style sheet first before we go into the basic HTML coding down here.

If we go over and take a look at the style sheet, this is all I have for the style sheet.

And so the first thing the first thing I've done is I've created a class called cool stuff again.

You can basically more or less name this.

The important thing is it has to begin with a period.

So classes begin with a period and then you name it what you want to name.

So this is going to be cool stuff past that.

The syntax is basically the same syntax we've been using for other things with N C.

So we're going to say the color colon is going to be orange.

So the color the property is going to have a value of orange, we're going to delimit.

Remember that semi colon text decoration.

So basically, text decoration is just a property you can add underlined.

You can have different things, colon, and we're going to make this and underlined.

So anything with the cool stuff class will be orange and it will be underlined again, whether it's a P or an H one or in 86 they knew, then closed the squiggly brackets Then that we're going to have a serious class.

This is this is a serious class, boys and girls.

Maybe illegal legal stuff or terms of service again.

Things that you want people to take seriously again.

We start this with a period so period is for class.

For this, we're going to do fought style.

So basically, this is just simply what style of fun you want for this particular class.

And we're just going to make it a talent, right?

So basically anything that is supposed to be serious, we'll be in italics right again.

You can put you about many, many, many, many different properties and values here.

I just put these these couple just to make life easier.

Then we're gonna go over, and we're actually going to take a look at the HTML document itself from here.

We're going to open up the body like you normally do with an HTML document.

Then we're just basically gonna step through and show you what these different classes look like.

So the first thing we have is a normal H one tag, completely normal.

Whatever the default for the Web browser is, that is what we're going to get.

Then what we're going to do is we're gonna have a tch one tag.