Name: CSS and HTML 5 - DIV Tags and Borders
Uploaded: 2020-03-26T07:05:05.000Z
Duration: 13 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...

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 degree

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

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

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.

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.

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.

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.

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

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

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.

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

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.

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.

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.

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.

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 with this coupon, not only did I do a border, but it a border, I did a radius.

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.

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.

Subtitles ListPlay Video

CSS and HTML 5 - DIV Tags and Borders

basically

solid

opinion

comment