XHTML and CSS Tutorial - 29 - div Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what is going on guys it's Bucky and
welcome to your 29th CSS tutorial and
this tutorial is going to be amazing
because we're going to be talking about
my favorite part of CSS and that is
called the div element now before you
might have noticed if you try to make a
cool-looking webpage that what we know
so far we can't really get a cool layout
with our web page maybe you tried using
tables but that didn't really work out
it looked like an old web page I mean if
we just put like a heading and an image
and then a paragraph everything kind of
looks like it's stacked on top of each
other and it reminds you of like the old
1990s websites where everything was just
like plain and stupid and it wasn't a
good layout look more of like a outline
for English class than the layout so
here is what I'm going to introduce to
you guys in this tutorial an element
called div short for division long for
the now it's not long for dubba anyways
what it means is a div element pretty
much gives you the ability to define
sections on your web page to place
elements exactly where you want them so
for example if you want an image in the
top right and then um maybe a heading in
the bottom left and maybe some
paragraphs somewhere in the middle you
can position them exactly how you want
them using the div element so now
everything just doesn't have to go
paragraph under a heading under an image
under another heading nothing has to be
stacked on top of each other anymore it
could be laid out to the left right side
by side if you want so anyways enough of
me talking let's get and let me show you
guys this div in action so let's go
ahead and put some text on the screen
just put some my name is Bucky that's
good enough nothing too big I don't want
to waste my time type in a worthless
text so anyways go ahead and surround it
with these tags div and yes you have to
use those exact letters and div so now
the text my name is Bucky it's
surrounded in
tags right here so what exactly can we
do with div tags well if we go up here
in our CSS interactive and in our
properties or curly braces whatever you
want to come go ahead and start adding
properties to it first of all let's go
ahead and make it easy to see so let's
give it a like a solid red border so
border two pixels solid red if you guys
can't see that then you are blind so now
I'm going to teach guys about something
called positioning but actually just go
ahead and do this position app salute
now positioning is like a whole another
tutorial so I'm just going to skip over
this for now but it's crucial that if
you want to follow along then your right
position equals absolute but again arm
don't worry about position right now
because I'm going to be covering that in
like two or three tutorials but for now
let's just stick with div and focus on
this so anyways like I said a div is
pretty much a section of your website so
what we can do to give this box yeah
that's a better term for a box when what
we can do is first give this box a width
so go ahead and set the width equal to
300 pixels and now what we can do is
check it out let's go ahead and save it
so we see what we're working with first
go ahead and refresh the screen and we
now have a box on our screen now the
text is inside the box aka the div and
also the box has a border of two pixels
it's solid and it's red person all right
Bucky you told me that I can position
this anywhere I want on the screen it
doesn't have to be stuck in the top-left
corner well let's go ahead and change
that right now in order to change the
position of this box the only thing you
need our coordinates now here is the top
of your browser right here and here's
the left-hand side so say you want to
move it down 40 pixels so be somewhere
right here and left 35 pixels so it'll
be like the top left will be somewhere
right here so let's go ahead and do that
by adding the properties top
and go ahead and make this forty pixels
and also set left equal to 35 pixels and
a lot of people get this confused easy
whenever you save it and refresh it you
see that it moved down 40 pixels and it
moved to the right 40 pixels whenever
you say top 40 pixels you're saying the
top left corner you want to be 40 pixels
down right here not like the middle some
people might think all right a middle
point would be a good point to move
around but it's actually the top-left
corner you're you're focusing on so
whenever you say top 40 it says move the
top down 40 or in other words 40 pixels
from the top and whenever you say left
the 35 pixels it says move this corner
35 pixels from the left so now we have
our box move down from the top 40 pixels
and move down org ship excuse me moved
over from the left 35 pixels so pretty
easy to understand and now you can see
by using those coordinates we can move
this box around the screen any where we
want so this is a lot better way of
positioning our elements around on the
screen then just before or maybe if you
tried using a table don't ever do that
because it just doesn't work this is the
new and improved way of how to use CSS
to position elements so later on when
we're making an entire website and say
maybe we want our logo in the top left
and maybe an ad on the top right and a
navigation bar across the top and maybe
some more navigation on the Left we use
a bunch of different divs in order to
make a bunch of different boxes that we
can put stuff in so anyways I'm going to
be teaching you guys about positioning
and how to make different types of divs
in upcoming tutorials so don't forget to
check those out so for now thank you
guys for watching don't forget to
subscribe and yeah I guess I'll see you
next video