XHTML and CSS Tutorial - 21 - Padding Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

welcome back guys it's Bucky and welcome
to your 21st XHTML and CSS tutorial and
in this tutorial I'm going to introduce
a concept with CSS that tends give
people a lot of trouble and the reason
for this is that people tend to explain
this in it's not the most easiest
concept to grasp but it is critical
whenever you're creating a website and
you need to position elements exactly
how you want them so anyone I ever heard
that try to explain this to me did a
pretty terrible job so I'm going to try
and clear everything up for you so
whenever you have an element on your
screen like a header let's go ahead and
put a header too and that's right
I love Bucky that's good enough
I love Bucky and let's go ahead and
check this out right now whenever we
have any element basically on the screen
we look at this element and say oh this
nice um you know text on the screen
that's all I see but check it out and
here's where I'm going to throw you for
a loop
this one element actually consists of
four different parts now we already know
that the text and that is called the
content but what you don't see is if
three other parts and that's because
they're all white right now so they're
kind of hard to see but there's actually
the content which I just showed you was
a text the padding which we're going to
be going over this tutorial in the
padding is basically this see this blue
that I just highlighted and everything
turned blue well if you could go ahead
and draw a box around here and make a
border the padding would be the space
between the text in the border and that
brings me to the third part which is
actually the border and the margin is a
space outside the border so anyways the
space between the text itself and this
little line the border that is called
the padding and that is what I'm going
to show you guys in this tutorial so
let's go ahead and the first thing that
we need to do is change this from a
white padding to a white background
because how the heck are we going to be
able to what's going on there so the
first thing that we need to do is change
the background color so in order to do
that
go ahead and type the element you want
to work with h2 and let's just go ahead
put background color and don't want
something too dark because of black on
something dark um is just going to look
bad so put like something like yellow or
pink or orange maybe um so I'm going to
go ahead and put yellow and let's save
this and see what we got
so now that might be a little easier to
see the you know some background other
than white so now we can see that we
have our content and we don't have a
whole lot of space between the edge of
this yellow and the text it's pretty
much butted up right up against the edge
so every saying all right I have this
background but I basically want to add
some padding between the text and the
background so in order to do that I mean
you guys can probably figure out what's
going to happen right now but you can
either do this in one of two ways you
can either change the overall padding by
typing the keyword padding and setting
it equal to value like 20 pixels so
let's go ahead and save this and see
what happens whenever we refresh this
you see that we get a nice little pad
between our text and the edge of our
border and that is actually 20 pixels on
either side 20 pixels on bottom 20
pixels on top 20 pixels on left and 20
pixels on right even though there's like
100 pixels because it's the width of the
screen but anyways 20 pixels of padding
all the way around but now you're saying
all right I mean so right now you can
basically understand what padding is
it's a space between the text and the
border of whatever you're working with
but I saying all right I understand
padding simple enough but now what I
want to do is I want padding but I don't
want it all the way around maybe you
only want padding on the top and bottom
well in order to do that this isn't
going to work anymore because this gives
you padding all the way around in order
to change the padding in any one
direction they give you four key words
that you can use padding top padding
bottom padding left and padding all
right so let's go ahead and change it on
top and bottom padding - top
definitely spread that ring padding-top
let's go ahead and add a like uh 30
pixels and for the padding bottom let's
go ahead and and like I don't know 20
pick anything you want who the heck
cares and let's go ahead and make sure
you put pixels and save this and see
what happens
so now when we refresh this we see I
forgot my values already 30 and 20 we
got 30 pixels of padding on top and 20
pixels of padding on bottom and no
padding to the left so maybe when I do
this you can see more clear what is
padding and why is helpful so anyways
whenever you want us um how should I say
this place items on your website very
specifically padding comes into play a
lot so whenever you know you just want
that header but just a couple pictures
to the right that is when you can use
padding so anyways the next thing I'm
going to talk to you guys about is
borders and margins and they're a lot
different than padding although a lot of
people get them confused so don't forget
to watch my next couple tutorials and
that's it I'll see you guys later