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 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.

I want that text to have the same color.

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.

Or imagine again with a website.

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.

Well, what you're able to dio is with N.

C.

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

As you say this class for this class.

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 so again you can go through.

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.

S o.

I have created two files here.

One is class dot html.

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

This is the HTML document.

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.

Basically, this is what we have.

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.

Relation is style she'd herefor equals.

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.

Again, this is class style dot C S s.

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.

Whatever the hell you want.

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.

S s.

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.

Of course.

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.

So again, think about this.

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.

You give it whatever name you want.

Then you open the squiggly brackets.

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 gonna go down.

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.

H one tag.

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

This is simply going to print out.

This is basic H one.

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

We're going to add the class so class equals double quotation marks.

Cool stuff.

So this is now going to have the attributes of the class of cool stuff.

So this is a cool H one tag.

So basically, with his h one tag, it will not only be h one with size and all that, but then we'll also be orange, and it will be underlined then, under that, we have a tch one class equal.

Serious.

This is a serious actually tag again, we're going to look here, and basically this is going to be a tch.

One tag on Lee.

Now it's going to be italicized then you're going to go down.

We're gonna basically do the same thing for the P.

Tagged.

Yes.

So you get again.

You get the idea of what's going on.

We have a basic P tag and then we're gonna have the P tag with a class of cool stuff.

This is gonna be a rocking P tag.

Then we're going to have another P tag class of serious.

There's gonna be a serious p tag, so this is going to be over, even underlined.

And this one is going to be italicized in the final thing we don't have down here is I'm just going to add an H three tag and this is going to have two classes associated with it so you can have multiple classes, associate ID when you're when you're typing out your text and all you do is you simply put a space in between.

So again, this is an important thing to be thinking about whenever you're doing coding again.

What is the dilemma?

Tres What are the separators of that type of thing?

If I'm putting in line CSS code s O for different properties and values, you put semi colons between those when you're doing multiple classes, all you have to have is a space.

So basically we do class equals.

We opened double quotation mark.

We then say what classes we want attributed to this.

So we want serious space and then cool stuff, and then we're going to close the quotation marks.

Close this and this This is going to be this is a multiple class on a three.

We're then going to obsess.

I'm gonna close the body, we're going to close the HTML and then we're going to have our file see again.

That's an important thing.

Always, always make sure you remember all your tags and all that kind of stuff.

So then we're gonna go over here.

We have a closet class that h g mail.

I'm going to double click on it.

And now this is going to open up and you're going to get the idea of what's going on here.

So again, So if we take a look, we have this in the background.

Now, that was so basically what we have here is this is basic h one.

So again, this is that h one without any classes.

So this is a cool age.

One tag.

That's what we have here that has the cool stuff.

So this is a tch one with orange and underlying.

Then we have the H one.

The class is serious, so you'll notice.

Here all it is is italicized, right.

Then you go down to the P tags.

Here's a bland P tag.

Then you have the P tag with cool stuff.

So this is now orange and underlined for the P tag.

Then you have the P tagged with a serious and that is a Tallis sized.

Finally, we have the 83 tag.

So you take the attributes of the H three tag.

You add what you have for serious.

You add what you have for cool stuff.

And so you now have a three tag that is orange that is underlined and is a tallis sized eso again.

This is a way against visually.

So when people look at your website, it gives Maur coherence to your website again.

Okay, When I see something that looks like this, then this website is talking about a particular subject.

When I see something that looks like this, then that means the website is talking about a different subject.

And so, using these types of classes, this is way a way you can give a far better user experience to your end users when they're taking a look at your website.

So now you know how to do classes and C s s woo.

Yeah, I know.

It's like a lot of this putting stuff.

Oh, wait a minute.

What do you mean?

When you break everything down to its simple component is relatively easy and straightforward.

Yes, Again, in the technology world, you take all these little components, add them together, and then you get a sophisticated A project.

But again, it's all built from very small, simple components.

One of the things that it will say with using classes and CSS is I would argue you should not try to do this by the seat of your pants.

One of the big problems for new coders is new.

Coders have the idea that they're going to design and code at the same time.

So basically, they're gonna write out their website and as they're writing out the wet be the actual website itself, then they're gonna be going and tweaking CSS and doing all that type of thing.

This is where doing things such as building a prototype will make your life a hell of a lot easier.

So if you're going to be building a website, what I would argue is use a basic piece of software, whether it's word, basically any kind of word processor or maybe some kind of image software, things like photo shop or illustrator, things like that.

Basically, with those types of products, you can sit there and you can design out how you want your website toe look and basically get that pretty close to how you want the finished product to look.