XHTML and CSS Tutorial - 19 - text-align and Changing Background Color Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys your 19th XHTML and CSS
tutorial and this is gonna be a sweet
one so what I want to teach you guys
first is how to properly align text like
Center justified and you can also make
it left justified which it is by default
or make it right justified so the first
thing that we need is something that we
can Center on our page so just go ahead
and make something like a header three
header one is just too big I don't like
them so make a website let's see what I
would have like if I made it blog so
buckey's blog and that looks pretty good
so that's what we want the title it'll
be but if we go ahead and save it right
now look at this it's on the left hand
side of our website and that just looks
dumb title should never be on the left
hand side what is this like you know I
don't know I can't think of it I can't
think of a good example but I want this
title in the middle is what I'm trying
to say so in order to do that go ahead
and write header three of course and
inside your curly brackets the property
then we need to change is called text -
or - I wonder what stuff oh I wonder
what the correct term for that minus
sign is if you know leave me a comment
so I won't mess up in the future
tutorials anyways text - online and you
can either have them there's one of four
things you can do left which is by
default what you just saw Center which
we're gonna make this right and I think
there's one called justified now
justified and I never use this one
people usually don't but I think it's
like what newspapers use where it's left
and right justified so anyways I'll play
around with that if you want but I want
my text centered so let's go ahead and
save this and see what we get refresh
and check it out our title is now
centered perfectly on our webpage pretty
sweet huh
so now that we have a blog let's go
ahead and blog about something so I'm
gonna go ahead and make paragraph and
I'm just gonna write this is the best
day ever and I'll just go ahead and
paste this bunch because I really want
to stress and get my point across that
this is indeed the best day ever so I'm
gonna write it like 8000 times so let's
go ahead and
save this and refresh and it says all
right this is looking pretty good but we
can't really uh you know this first line
doesn't really stand now it would be
sweet if we could just indent this right
here so you get this brilliant idea to
go in here and right space space space
space space space space about 15 spaces
that looks pretty good so let's go ahead
and save this refresh and what the heck
what's going on it's not working did we
break it no remember that XHTML is
whitespace insensitive so it takes that
whitespace and pretty much is like yeah
I'm just gonna ignore that so anytime we
want to add an indent on our paragraph
what you know you want to do a lot of
the time actually you need to add a
special property called text indent now
text - or - who knows indent is spelled
like that and you can either do this as
a percentage I believe or what everyone
just normally does is they use a certain
number number of pixels how many pixels
do you want to indent it in order to do
that just write the number of pixels and
write P X after it so now once we go
ahead and save it it's going to go ahead
and indent that 25 pixels or again you
know you don't have to indent 25 you can
indent whatever number you like but that
is how you indent text in a paragraph so
anyways if you're trying to indent it
like this before and it wasn't working
that's why because XHTML is just going
to ignore your whitespace and do it at
once so that's how you make paragraphs
indented so now that we have time let's
go over something cool that you guys are
probably wondering what do and I
probably should have covered this and
like one of the first CSS tutorials but
hey we'll cover it now in order to
change the overall font or excuse me the
overall color of the text as well is the
background of the entire webpage you
need to edit the body element right here
so let's go ahead and
type body right there because we're
pretty much this means affect the whole
website so what do we want to do to
affect the whole website well the first
thing that we want to do is let's go
ahead and change the background color
and you know what the property for this
is well if you guess background - color
you are correct so make sure I smell
that right background color yep and
let's go ahead and change it to
something like blue that should look
pretty good and after this so now check
it out
our website is gonna appear blue with
black text but I mean that's not the
easiest stuff to read so if we have a
dark blue background it'd be a lot
easier to read if all this text was
white kind of just like that so let's go
ahead and do that and in order to make
our text white we can do this in one or
two different ways we can go ahead and
add make our headers white and make our
paragraphs white and make everything
else white or what we can do is we can
just go ahead and add a color white
property like this color white property
to the body and since everything else is
in the body it's gonna get affected as
well so it's a lot easier than going
through each one of your elements and
changing it to white just change your
overall body to white and that's gonna
affect anything that's in it so let's go
ahead and save that and see what we get
nice that is a lot easier to read and
this website is looking pretty good
mostly because it says boogie on there
and I'm just awesome guy so anyways that
is a how you affect the body background
color in the text color and also
center-aligned headers or pretty much
center-aligned anything and also indent
paragraphs so I hope you guys enjoyed
I'm guessing you did so I think you guys
for watching don't forget to subscribe
and I'll see you guys next video