Name: CSS and HTML 5 - Basic CSS Syntax
Uploaded: 2020-03-26T07:47:23.000Z
Duration: 17 min 13 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...

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

Adverbs of manner

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.

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.

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?

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

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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