XHTML and CSS Tutorial - 22 - Border Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys welcome back to your 22nd
XHTML and CSS tutorial and as promised
I'm gonna be talking to you guys about
borders and I'm not talking about like
the Mexican US border I'm talking about
borders and CSS now as I have mentioned
before or at least I think I mentioned
this before
the border is the area that surrounds or
basically it outlines the padding so
what I did before the story is I just
set the overall padding in 15 pixels so
we have the content and we have 15
pixels of padding around it so now what
I need to do is show you guys what a
border is so let me make one of the
ugliest borders ever I'm just gonna make
it stand out and I'm gonna make like a
red border or something so the border
you think you might just be able to type
border in type of red but you can't just
do that border actually has three
properties that you need to set in order
to make a border
the first one is border color and let's
just go ahead and set this equal to red
that should look pretty good and the
second one is with how wide or thick you
want your border and that's border width
and I'm just gonna make mine like 3
pixels or something that'll be good
enough and the last um excuse me the
last element you need to set when
working with the border is border style
now I think by default it might be solid
but let's see if I can remember there's
dotted dashed um I think there's one
called double groove in set out some
solid anyways you can look them up
online if you forget them but let's go
ahead and I'll add a simple one border -
style - and this gives you like dotted
lines basically so now let's go ahead
and save this and see what we get when
we refresh this we get a red three
pixels wide dashed border pretty cool
huh
so this kind of actually reminds me of a
coupon that you would cut out so if
you're making a website with coupons
coupons to love Bucky then uh you know
there you go I just basically made it
for you so that is basically how you do
that
cool thing I want to mention before I
let you guys go is each side can have
its own border so whenever you think of
something with a border you typically
think the border is consistent all the
way around but sometimes when you're
creating the website you want the top to
be one thing or maybe you only want a
border on the bottom like it's
underlined and cool type of way so you
can do that using some special border
properties and that's this say you want
to change like the top or something you
can use border - top - color and set
this equal to like green that looks good
and now what you can do is like put
border - top - style and let's make this
one dotted and now let's go ahead and uh
oh yeah the width border - top - width
and set this equal to like 4 pixels bump
it up a little bit and if I didn't mess
it up mess up anything I should get a
nice dotted green for pixel border
across the top so this looks pretty ugly
right now but trust me if you work with
it I mean most people you just use this
when they want to underline something
like if it's like the title of a
paragraph or a title of article or
something but I just want to show you
guys a quick example so I made the
ugliest website I could possibly make
but anyways I showed you guys how to do
that on the top but if you just replace
this word top with bottom left or right
then you guys can see the other effects
that it can have I'm not going to go
through bottom left and right because
it's obviously it's obvious what it
would do so anyways that is how you make
a border whether you want it consistent
you just write border - the property or
if you want it on one side you're a
border
- what side you want - the property and
then write the value so anyways that's
basically all there is the borders um
nothing else I can think of so anyways
thank you guys for watching don't forget
subscribe to now see you next tutorial
where we're probably going to be
covering margin so I'll see you then