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.

Hello again.

As you know, I am Eli the computer guy, and in today's class, we're going to be going over the basic syntax for C.

S s cascading style sheets.

So again, all CSS does all cascading style sheets do is they basically format the HTML that you will be printing to a page so you can use the basic H one tags et tu tags P tags so on and so forth to print text to a page in a female.

But if you want that text to have colors, if you want that text toe, have borders.

If you want that text to be underlined, any kind of formatting like that you're going to need to use CSS in order to be able to do that with CSS or simply going to need to understand the basics of the syntax.

And so that's what I'm going to be teaching you today in today's class.

So a bit of a warning warning here for today's class.

We're at that point in CSS when I am teaching you things and you kind of have to understand multiple different subjects before any of those subjects fully makes sense again in the technology world, when they think that things could be a paint that could be a pain in the butt is that I have to explain this.

But when I'm explaining this, if you don't understand this, you're not gonna fully understand the first thing.

So I have to explain this so that it then I can teach you this.

And then once I've taught this, then the first thing actually makes a hell of a lot more sense, right?

We're kind of in that area with CSS.

So what?

I'm going to be explaining to you the basic syntax for today.

I'm going to showing you basically how you can define how tags are supposed to look in the HTML documents.

But the thing with CSS is there's multiple ways to call C.

S s you can call CSS from an external some style sheet so you can have a style sheet that all your HTML documents reference back to you.

You can have your CSS actually in the B in the head of your HTML document, or you can even have your C s as in a line.

So when you have your P tag, your H one tag or whatever, what else?

You can actually have the CSS in line to define how the font is supposed to look.

So I'm not actually going to be getting to that in this particular class.

And that will be in the next video what I got when I will talk about external style sheets and how to actually insert CSS into your HTML document.

So for today, all I'm showing you is the basic syntax so that when you get to the next class, everything is going to make a lot more sense.

So if at the end of today's class you kind of understood what stand a little bit, you're like, OK, so that's what a selector is, and that's what a property is, and that's what a value is.

But I'm not really sure how this Foley works.

That's okay.

That is completely okay with the next class.

When I show you how to actually put the CSS into an HTML document, all of this should come together and make a lot more sense for you.

So with that, let's go over the computer and I can explain how this works.

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

So I'm using text edit.

In order to write out this CSS and HTML again to write out CSS html.

All you need is a text editor.

So if you're in the Windows World, you can use note pad again.

The Mac world.

You can use text edit in the Lenox world.

You can use G et at nano of them or whatever else for this particular project.

Today I have saved this as a dot html.

So all of the CSS and all of the HTML are contained in one document s.

When you look at this document here, basically we're going to open up with the HTML tags.

We're then going to open up with the head tag and inside the head tag is going to be the style tag s so basically everything within the style tags is going to define what the C s s should look like for the rest of the document.

Then you're going to go down here, you're going to close the head, you're then going to open the body and then basically, you're going to simply type out your HTML like you normally do.

But before matting for this HTML is now going be controlled by what you have written up here again.

If you don't fully understand this style tag and how this works, don't worry.

We will talk about this more in the next class.

But I just want to give you a bit of an overview.

Here s so when we go down here, basically, we're going to open up the style tag again.

We'll talk about that later on, and then we have the different what are called selectors that we're going to modify for the day.

So again, in the HTML world, everything is defined by a tag.

And so when we're talking about a selector and CSS, essentially, what we're talking about is the name of the tag.

So this is the body tag.

Right.

So we're talking about the body tag.

This is going to modify what the body tag looks like.

Now you will notice there is no little arrow brackets or anything else here.

All you're going to do is just the name of the tag itself.

And this is going be called a selector past that you're going to open the squiggly bracket, then you're going to go down to the next line and from here, what you're going to do is you're going to put in the property that you want to modify eso whether you're dealing with the body, whether you're dealing with an image, whether you're dealing with the the heading tags or whatever else, there are going to be different properties that you can modify.

Basically, just have to do a Google search where we're looking your paper or looking, you're booked to see what properties you can modify, but they're predefined properties and modify.

So for here, the property that we want to modify is the background color.

So the property is called background.

Ah, hyphen color.

Then you're going to separate this with a colon so normal colon and then after that, you're going to say what the value of that property should be.

So the background color for body, we want this to be orange for this particular example than what we're gonna do is we're going to use a semi colon as a delimit erso delimit er basically says this is one value.

This is one set and then you can go to the next.

You could go to the next.

You can go to the next.

You can go next.

If you forget to put the semi colon there, you can run into problems, I guess.

Like PHP and all the other coding languages know what the hell you're eliminators are and make sure that you actually write them out.

Then from there we're going to close the squiggly bracket.

And so basically, what this is going to say is the selector body, the tag body, we want the background color to be or that's it.

They were going to go down to the H one tag beheading one tag.

We're going to open this squiggly bracket.

So for the h one tag, we want the color to be colon white.

So this will make 81 white now again.

We use the semicolon deal emitter.

We go to the next property that we want to modify, and we're going to do text hyphen a line.

So we're going to align the text and we're going to align it to the center again.

We do the deal emitter of a semi colon, and then we close the squiggly bracket.

Then we go down here for the eighth to tag again.

The selector of eight to the H to tag.

What I've done is I've actually modified the background color for where that text is actually printed out.

So there's a background color for the entire page and then behind the lines that are written in age, too.

We want to modify the background color to be something else a background, a hyphen color due soon, my colon.

And then we're going to say yellow.

You will not notice Here I put a space in between.

You should put a space, but with things like this, the white space doesn't matter that much.

So you put yellow and then you do the semi colon, and you close that for 83 So the selector of the tag for 83 were opening up again and you could do a border again.

I just want to show you that there are a lot of things you could do.

A CSS CSS opens up a massive world of what you could do with with formatting on html document.

So for this just for craps and giggles, I just want to show you could do a border.

So we're going to do a border, and that's going to be a five pixel border of solid blues.

There's gonna be a border around the lines of text that age three again, we're going to that semi colon, the limiter, and we're gonna close these squiggly They were gonna come down here to pee.

We're just gonna modify this a little bit.

You can modify the font family.

So that's a big thing for a lot of people.

Is they don't like whatever the default font is for HTML.

So you can modify what you want that fun to be.

Ariel times new Roman.

There's a number of different fonts that comes standard with CSS.

You can modify it so you have a hyphen family colon again.

So we're just going to say that for p here should baby Ariel, we're going to do the semi colon, the limiter.

Then you can go down.

You can actually modify the size of the font.

So forward p tags here.

We want to say how big the techs should be for the P tags on.

So for this, we're just going to say 40 pixels just because again, we're going to close it.

The clothes that with the DL emitter, and they're gonna close the p tag with the squiggly bracket.

We're then going to close style.

And again, for this point, we're not really gonna worry about that a lot.

Then we're just simply going to come down here in the body.

Now all we're going to do is we're going to print out a tch one.

This is what h one looks like.

Eight to this is what age, too looks like a three.

This is what age three looks like.

And p this is what he looks like.

So again, the html itself, when you're referencing an external style sheet or styles that are in the head of the Jerome at Mel document, you were literally just going to simply type out the normal tag.

And then your Web browser will know what to do with as normal tax from there.

We're going to Dio is I have the CSS syntax, not html document sitting on my desktop, I'm going to double click.

And when I do, this is what the text looks like based off of this C C s s s o we go here again.

Let me just, uh, put this over a little bit.

And, uh, what we can see is S o the background color lips.

Let me modify this a little bit.

It's always a pain to show things.

Okay, here we go.

Eh?

So what we can see is we have here style, body background color equals orange.

And so what we can see here is the body.

The background color is now or h one.

We want the color to be white.

We want the text to be aligned to center H one text is white.

The Texas Aligned to center 82.

We want the background color to be yellow.

So what you'll notice here is the default.

HTML formatting stays in place.

So since I'm not saying what color the two should be because I'm not saying what font it should be.

Whatever the default is, that remains how it is.

The only things that get modified is whatever I've stated within the CSS.

So it's still in black.

It's still aligned to left so on and so forth.

But because I've said background hyphen, color is yellow.

Then I get this yellow bar behind the age to text.

We then go down to the three.

This just shows us we have a border that's five pixels of solid blue.

So this is a three week in a border of five pickles, five pixels that solid blue, and then we go down to pee.

The font family is Ariel.

So if you take a look at this, you'll notice you'll notice this font looks different than what the default font is.

So that's the aerial funt on.

Then the font size is 40 so you can see again.

Even at normal size.

It is a large font size of this is P.

That's what you have printed out.

And so this is the basic syntax of how you're going.

Be writing out C.

S s.

So this is called a selector again in CSS world is to call the selector.

Just think of it is attack again?

The body tagged the H one town gate three, tag P tag the image tag.

Whatever else.

Basically.

So what you're saying is this is the tag.

Then you're gonna open up a squeal squiggly bracket.

Then you're going to say what property you want to modify.

So there's a whole bunch of different properties that are available to you again.

Do a Google search for whatever else to see what properties are available to you on.

Then you do colon, and then you do the value.

And again, this is one of those things you just again.