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'm Eli the computer guy, and in today's class, I'm going to be showing you how to use Dima tags and adding borders to did tags using CSS.

So def tags and borders with dip tags can be useful when you're creating a Web page of your Web application basically to create sections of your page that are all tied together, probably the best example would be to be something like a coupon.

So imagine if you wanted to create a coupon where people could print that out and basically cut it out and bring it in.

You could use a div tag, and basically, with the deaf tag and with a dotted or dashed border, you can have a border around all of the information within that def tag.

So you could have it.

Nature.

One title.

You could have p talking about what the coupon allows you to.

D'oh.

You could have an image so on and so forth.

So basically, when you're dealing with DIV tags, DIV tags Airways to basically connect ah, bunch of different information together within your HTML Web page and say, this all goes together and since it's all grouped together than you could do things, so it has had background colors to that that dip tag you can add borders through that day of tag, so on and so forth.

So that's what I'm going to be explaining to you today.

Please do remember, while you're watching this video that their arm or things you can do with Divya tags, then what I'm showing you in this particular video again.

One of the issues that I run into as an educator is the whole question of how do I teach you enough so that you can learn how to do other things, but not so much.

It becomes bloated and everything kind of goes out your ears.

This becomes a problem when you're dealing with things like CSS, because there are so many options or so many properties.

There's so many values.

There are so many different ways.

You can try to accomplish anything that if I try to explain everything to you, I would just be doing a dump of information and at the end of it, you wouldn't actually remember any of it.

So what I'm gonna be showing you how to do today is rather simple.

So again, I'm gonna be using the diff tag.

We're gonna be putting borders around different dibs on.

Then at the end of it, I'm going to show you how to create like a coupon.

So basically, we're going to size the DIV.

We're gonna put a background color of the DIV around little radius borders on the day of the whole nine yards.

And so basically what I'm showing you today is these are the different types of things that you could do with a div tag using CSS.

If you want to do something more complicated with your particular project again and go out and do a Google search, so with that, let's go to the computer and I can show you how the Div tags and the borders and CSS work So here we are at my Mac book Pro.

This is my demonstration system again.

I'm using text edit to write all of this.

A basic Ask a text editor If you're in the Windows world, you can use no pad again The Mac world.

You can use text at it.

If you're analytics world, you can use G edit them, Nano whatever again.

I'm using a basic, basic asking text editor just to show you that that's all you need in order to write this stuff and start learning, uh, past that, If you want to use an i d e.

That is up to you s.

Oh, here we have basically the two documents that are gonna be required for today's particular project.

We have a div border dot html.

So basically, I wrote all of this in text at it.

Then I simply titled it dot html.

So again, for a Web browser has to be done.

HTM or dot html on then I have a style sheet.

I just simply called this border style dot CSS.

So first thing I want to do is just run through the HTML document rather quickly because there is basically just a lot of duplication here.

I'm showing you multiple different examples of borders, and so basically, I just have a diff tag that a copy and paste it a couple of times, then modified what class that those def tags were going to use.

So let me just run through this real quick.

So the first thing is, that course we're gonna open up the HTML, we're gonna open up the head, and then we're going to link to the style sheet.

So link relation style sheet Karev equals.

And so this is where you put with style sheet.

You're gonna be referencing border style that CSS again.

If the South she is not in the same directory, you would simply just have to put the folder path in order to get to it.

We close this out, we then close the head.

Then we're then going to go to the body.

And basically, I'm just going to create a number of dibs here and put brakes to separate them.

So this is going to be a div.

This is gonna be a class equals dotted.

So within my C s s.

So basically within my border style dot CSS.

I created something for dot dot It a class for dotted.

So this class is going to equal dotted within this, We're gonna have 81 You'll notice there's no other formatting other than normal text tags.

H one, this is a dotted border.

P.

Here are some more tests I put here to look pretty again.

I just want you to see that all of this is contained within that def tag on.

Then I'm going to close the diff tech.

So the idea here is all of this will have a dotted border.

If if I did not fat finger anything, I then do a break.

Just put a space between everything.

I then go down to another div.

This is going to be dashed.

So class of dashed.

This is a dash border here.

Some tests, blah, blah, blah, closed the div.

Then we're going to go down here, Gonna open a div.

This is going to class solid, so it created a class of solid.

This is a solid border.

We're going to give class equals double.

This is a double border.

And then what I finally did down here is this one is a little bit more complicated.

But again, all of the complication is actually in the style sheet itself.

That's the cool part about using the style sheet is by using a style she you can leave your HTML document relatively easy to read.

And then if people are trying to figure out how the formatting works, they could just then go over to the style sheet.

So this is a day of class of coupon.

So with this coupon, not only did I do a border, but it a border, I did a radius.

I did a height.

I did a wit that did a background.

I did all kinds of stuff, but you can't see that here.

So then let's go over and actually take a look at the border style CSS and see the different classes that I created.

So I simply created a class for dotted now again for the properties, for the values.

You can name this class whatever you want.

I simply named the class dotted just so I knew what it waas.

We're gonna open up with the squiggles, and then here what we're going to do is we're gonna say border colon, and then We're going to say how thick we want the border.

So we're gonna make this five pixels.

We're gonna make this border a dotted border, and then we're going to make the border color black.

So you do border Colon, How big you want?

The bull are basically how thick you at the border.

What type of border dotted.

And then what color border black.

They would come down here to dashed border.

Five pixels dashed black would come down here to solid border five pixels.

Solid black would come down here to double.

So double was basically a double line border, five pixels again double blacks.

This could be red, green, blue Whatever else, they were gonna come down here to the coupon.

So I created a class for coupon again to give you more of a practical example for this we're going to do is we're gonna do border Colon.

It's gonna be five pixels.

It's going to be dashed, and it's gonna be black, basically like the other ones.

Then you can also do something called a border radius.

So what a border Rabia's does.

It has actually puts a curve on the border, so basically gives those rounded edges.

And then here you put how many pixels, Basically, how big you want that rounded edge to be up without the 20 pixels?

Then I did put a background color.

So everything within the Div, with everything within the diff tag, I want to have a background color.

I just put gray is something to put their.

Then for this, I put the def so the dead will then be a wit of 300 pixels, a height of 200 pixels, and then you can say what the margin is.

Basically, the margin is is where should I sit in the page from left to right.

And so if you put auto basically, this will auto send center the def so we'll be in the center of the Paige.

So this is what the CSS classes look like.

We then go over and we actually take a look at the page itself.

This is now what we're looking at.

So we have the diff tax or the diff tag for dotted, and so we could see this is a dotted border here.

Some or some more text I put here to look pretty and as you can see.

So all of this is within that dotted border.

But you'll notice, since I didn't put a height since I didn't put a with basically this dotted border is all the way across across the pay.

So basically, this whole thing is within that dotted border.

Then we have This is a dash border, Same deal, dashboard or across the page.

This is a solid border.

Same deal all the way across page.

And this is a double border again that gives you that double border thing right there.

Same deal across the page.

So that is giving you a border for your def tag again.

There may be any number of reasons you want to do this again, just just to make things look a little bit prettier.

Then finally I went down and did something a little bit more complicated.

Uh, and so this is where we have the dash.

We have the gray background, we have the radius years, we have those rounded edges and then we have the height of 200 pixels, the width of 300 pixels and the auto margin or the margin that puts it auto in the middle.

So again.

This kind of gives you that example of how you could create again something like coupons on a page Now, just to show you how easy everything is to modify.

So if we go up here again this dotted class and this could be named anything to, uh, the doctor class, let's say we want to make this 10 pixels and we want to make it read like that's all we need to do for the color for the dash.

So let's make this I don't know, 15 pixels and we're gonna make this blue, right?

That's all you need to d'oh.

I simply do file.

I do save as soon as it saved.

That's basically live.

I hit, refresh and see.

Now we have a red dotted border, 10 pixels, and if we go down here, we have a 15 pixel dashed border.

That kind of gives you the example of what's going on there.

As far as the radius is concerned again, you have that little radius here.

Basically, the bigger the number, the larger the radius will be.

So if I go down and let's say I do a 10 the pixel radius file, I do save.

I hit Refresh.

Now you'll see that that radius is much smaller than it wasa Get half the size of what it waas.

If I go here for the radius and I don't know, I do something ridiculous is probably gonna be too big.

That's I do 40 pixels.

I hit save and then I hit.

Refresh.

Now you can see that we have really, really, really large radius there.

So that's basically how the Radius works again.

For all of these types of things doing a basic Google search you're taking a look at what is your favorite references you could get?

Simply go in again.

Let's see what?

What?

You're what you're able to do with the border things like border radius, background Crowther with height margin so on and so forth.

But this gives you a basic idea of how the borders work with the diff tags and some things that you can do with it.

So now you've seen how you can group text images, that type of thing together within a div tag on them, be able to add formatting to that dip again.

You can do the borders like I showed you.

You could do a background color you could do, nor a number of different things, depending on what your particular requirements are.

So using a dip tag is a very simple way to group everything together.

And then again, like something like a border, simply adding that board around border colon.

And then again how, how thick you want that border doing to be five pixels?

Do you want to be one pixel?

You want to be 50 pixels?

I would not recommend 50 pixels, but I guess you could do it right.

Do you want it to be solid?

Do you want to be dashed?

You want it to be double?

There are some other options out there, but these are the basic ones that I've shown you today again to give you the idea of what you can D'oh!