XHTML and CSS Tutorial - 31 - ID's Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

so people welcome to your 31st XHTML and
CSS tutorial and in this tutorial I'm
gonna be clearing up a lot of confusion
that you probably have surrounding the
div thing that I talked about a couple
of tutorials ago so a little refresher a
couple tutorials ago I told you guys
that in order to position elements
exactly where you want on your webpage
then you use something called div and
they're pretty much like boxes that you
can move around screen and they've let
you make the layout a lot prettier than
you could with just tables or just using
plain XHTML but you guys are probably
thinking this all right Bucky
if I have a bunch of different boxes and
they're all just called div then how
does the browser know what div I want to
go where well the answer is through the
use of something called IDs now ID is a
lot like well it's kind of a lot like a
style but it's different as well you use
ideas a lot with divs in order to
position boxes at different locations
for example if you had one div that you
wanted to go in the top left and you had
one div that you wanted to go in the
bottom right you would give them
different IDs and then you can tell your
browser I want this one to go on top
left and I want this one to go on the
bottom right so let's go ahead and make
two divs first of all so div and
ending div and let's go ahead and make
another one all right under it and in
the first div let's just go overhead and
right Bobby is the best and under that
one ray Hobart is the coolest it doesn't
matter what you write just go ahead and
make them different separate but equal
what's that from quote it and you get a
penny
so anyways in order to change these divs
and make sure that the browser knows
that they're different we need to create
something called an ID for each one so
let's go ahead and create an ID and in
order to create an ID instead of the
period like we did before that we use
with styles or excuse me classes we need
to write the pound sign so pound sign
whenever you create an ID and now type
the name of whatever ID you want
whatever name pops in your head I'm
gonna type mine Bobby because I'm gonna
apply mine to this div that is called
that has a sentence that has Bobby in it
so anyways name it anything you want
except the cuss word because that's rude
and now apply some styles to it like um
let's make it easy to see so let's give
it a border so border equals two picks
solid or red and now I'm gonna throw you
guys for a loop and add that position
thing that we don't know what it means
yet but I'm gonna clear it up in a few
tutorials absolute I can definitely
smell that right absolutely that's a
little better and let's go ahead and
take this div and move it down 15 pixels
so top move it 15 pixels from the top
and move it um let's say 25 pixels from
the left so now what we have is an ID
Bobby now any div that we give this ID
to is going to be this position and have
this border so let's go ahead and make
another ID right now and we can do that
by just copying this
and pasting it and changing the idea
name and change this ID to Hobart and
change the border to green green sounds
like a Hobart color and move it
mm let's say 65 off the top and five
from the left so check it out we have
two divs right here and right here and
we have two IDs that are different this
one has a red border and it's in the top
left and this one has a green border and
it's kind of below it shifted to the
left so now we want to say alright for
this div right here we want to give the
ID Bobby so in order to do that go ahead
and write ID equals Bobby make sure you
don't include the pound sign whenever
you're writing it make sure I didn't
write booby there make sure you don't
write the pound sign whenever you're
writing it is your XHTML attribute the
only time that you use that pound sign
is when you're making it a CSS so
whenever using it in between the style
tags include the pound sign this is just
your way of telling CSS yes this is an
ID so anyways we now applied this ID to
this div right here so whenever we
refresh it we get Bobby is the best
right here and check it out
it now has a border of two pixels solid
red it's now moved down from the top 15
pixels and it's now moved to the right
25 pixels so that's what happens when we
apply an ID to a div you pretty much
allows you to position it anywhere you
want on the screen so now if you go
ahead and take this ID and apply it to
this div
what's gonna happen is it's gonna take
this text Hobart is the coolest and it's
gonna say alright I have the idea of
Hobart so I'm gonna give it a green
border move it down 65 and left five
pixels so when you're refresh it that's
what we get so anyways that's what I'm
basically telling you how to do you have
two divs that are basically identical
and your browser can't tell them apart
well in order to give them identities
you need to first of all write what you
want your ID to equal pretty much give
them a unique identity or a fingerprint
and then your write what you want that
identity to mean whenever something has
the identity of Bobby I want to give it
a red border and put it in this location
whenever anything has the identity of
Hobart I want to give it a green border
and put it in this location so that way
we can use divs to position different
elements around the screen so before we
had one div and we can only do one thing
with it but now we can have a countless
number of this infinite divs and we can
position them all around the screen
however we'd like so now you can start
to see how divs are so useful in making
a custom layout so now what we can do is
we can make one div for our banner in
the top right and one div for our logo
in the top left and one Digg div for our
navigation bar at the bottom or already
left wherever we want it so that is how
you use IDs to distinguish divs from one
another so if this toy tutorial was
confusing then just watch it again and I
promise you guys will get it so anyways
thank you guys for watching don't forget
to subscribe in I guess I'll see you
guys later