XHTML and CSS Tutorial - 24 - Width & Height Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what is going on guys welcome to your
24th CSS tutorial and this tutorial is
probably going to be a pretty quick one
because I want to go over two quick
properties of CSS and that's the width
and the height and actually I want to
talk to you guys about a couple more
things I just remembered so let's go
ahead and get started the first thing we
need is of course something on our
website so let's go ahead and let's add
it heading forward we never work with
heading fours and it's a good heading
you know it's a fourth one deserve some
respect so let's what's popping into my
head when we going to type my name's
Forrest Forrest Gump close enough you
know a couple typos but hey who's
counting so let's go ahead and actually
I want to give this a pretty cool color
scheme so let's go ahead and make the
background red in the text white I
always like that color scheme so
background color red and the color of
the text which is color white so let's
go ahead and save this and see what we
got my name is Forrest Forrest Gump now
we can see a couple things are happening
automatically right now by default our
browser sets the height of the element
equal to the height of the text which
you know it should but it also sets the
width of the element equal to the width
of the website so check this out
whenever we resize our website our
element size changes so I mean maybe
this is what you're going for but maybe
it's not so depending on the size of the
website we really don't know how big
that elements going to be and whenever I
create websites I usually want to
specify the width of things so in order
to change that up or you know maybe you
like it like this okay then leave it but
if you don't in they're going to come
across a lot of times where you don't
you're going to want to set the width
and the height explicitly so first of
all let's go ahead and change the width
of that so it's not just default the
entire length of the website because
when you're making a background for our
header or something like that it looks
kind of weird to have all
extra space so in order to do that you
need to type in the property width and
go ahead and set to something like let
me see six let me go 350 will probably
fit nicely 350 pixels so now you can see
whenever we save this instead of having
the header background automatically span
across the entire website no matter when
we resize our website the header stays
350 pixels constantly so that's me it's
like easier to manage and it's easier
when you're designing website when you
know what's going to happen rather than
just not in your browser to take care of
it so anyways um people adjust the width
a lot more than they adjust the height
but there may come across time or you
may come across a time where you want to
adjust the height um to like 100 pixels
or something I typically don't mess with
the height whenever I'm working with
elements but some people do so anyways
here's a quick example of you just in
the height it looks pretty dumb right
now and for in general you don't want to
mess with it but you know now you guys
know what the height does so that is
what I want to talk to you guys in this
tutorial width and height and now that I
have some extra time I guess I might as
well show you guys this you know a
couple tutorials ago where I talked to
you guys about border and it was like
border width and border style and border
color and it was three lines all for the
border and it kind of you know that's
way too many lines just for one property
so if you want a consistent border
across the entire thing here's a nice
little shorthand that you can do if you
just go ahead and type border and not
with or not style or not color or
anything like that just border you can
go ahead and type all the values on one
line and CSS and your browser are smart
enough to recognize this so border let's
go ahead and set the three pixels solid
for the style and black so this will
save you a little extra time when coding
you don't have to span this across three
lines if you just go ahead and save this
and refresh you
borders going to know or excuse me your
browsers going to know that that is what
you want for a border and actually there
this is a whenever you have something
like top left right and bottom there is
probably a shorthand technique that you
can use for that or when you have like
border style border color um or you know
different properties for the same
element there's usually a shorthand
where you can you know skip a step or a
shortcut with that as well so even
though I'm not going to teach you all
the little shortcuts whenever you think
hmm there's probably a shortcut for this
well there probably is so if you want to
look them up it might save you some time
but anyways I just want to throw that
out there let you guys know that there
are shortcuts out there for doing things
I just don't have time in my stories to
walk you through every one or I'll I'll
be here here for like the next 80 years
teaching you guys all little shortcuts
on us thank you guys for watching this
tutorial
um I don't even know what I'm going to
be talking about in the next tutorial
but I guarantee it'll be amazing so how
can you not watch the next video with
that guarantee so thank you guys for
watching don't forget subscribe and I'll
smell you guys later