CSS Layout Tutorial - 02 - Styling the body Video Lecture - Learn CSS A

welcome to the second tutorial on CSS
layouts so we're going to get started in
this video now the first thing I want
you to do as I did in the previous CSS
and HTML series I would like you to
create a website folder and then I want
you to create a index.html and also a
style sheet and remember when you're in
notepad remember to save as all files
and you will save it as a style sheet
and this re exists so I'm going to save
it fine and the same thing with this
you're going to save this as an HTM or
HTML so you go to save as you don't want
to select the dot txt you want all files
and then that will give you a index.html
and a style sheet CSS so as you can see
I already have the standard HTML
document here and of course we are going
to point to our style sheet within our
folder now the first section that we are
going to style is the body section and
what we're going to do in terms of this
layout is we're going to start in a top
down order so the body gets rendered
first so that's what we're going to
style first and you will remember that
the body encompasses the entire web page
so every other element that we put in
here is a child element all the content
sections that we're going to do the
sidebar sections they will all be child
elements under the body section so what
do we want first well I always like to
start out with a nice background color
so let's go ahead and put that into our
body and you'll remember that the
property is background - color and I've
got a hex code all ready to go and that
is 9 c9 fox8 for all right and so let's
go ahead and save this and let's open up
our page and there you can see we've got
a nice background color now that
encompasses the entire webpage because
this is of course the body section that
we are dealing with now I want to point
out that you can pick the colors that
you want so if you want a different
color here by no means you have to use
the colors that I am using I just sort
of selected these but you can use any
color scheme that you want if you intend
to use this layout for a website and one
good way to do color
matching is go out to Google and you can
type in website color matching and there
are any number of websites out there
that will help you match colors so again
this is our background color and what
we're going to do is we're going to
place all of our child elements over
this and we will actually use this color
actually for some other purposes and I
will show you that in a few videos so
let's close this out so we've got our
background color and remember everything
that's put within the body rule set is
inherited by all the child elements that
we put in the body so for instance if I
create a main content section and I
don't put in a color in there it's going
to inherit it from the body now we're
going to override that we're going to
put different colors in the main content
sections but if we didn't it would get
this army green that I have here so just
keep that in mind this is really just a
background color that we want for the
entire webpage now we also want to set
the margin to zero now you will remember
the browser by default puts in that
extra margin space and we don't want
that in this web layout we're doing so
we're going to just override that and
set that to zero pixels so that will
eliminate all the extra margin space
that the browser tries to create on the
edges so let's go ahead and save that
there's nothing really to see there if
we load this you won't really see
anything because we don't have any other
elements in here yet but we would notice
it if we had a bunch of elements in here
so let's just go ahead and close that
out next we're going to set a font that
we want to use throughout our web page
and I already typed this out so I'm just
going to copy and paste it um the first
one that will get loaded is for Donna
and if the web browser can't locate that
font it will load Georgia and if it
can't load that font it will load serif'
now verdana and Georgia are two of my
favorite fonts actually I'd like Georgia
a lot too um but again you can pick the
fonts that you like you may want aerial
or Helvetica you know you may have some
other font again it's what you want I'm
just I'm just giving you the layout but
again you can pick the fonts that you
want to load so this is a good way to
set up some nice inheritance because
every child element that we put out
there now all the content panes that we
do will automatically put the Verdana
font out there in those child elements
we don't have to do it now because we
set it up here in the body section so
that it could be an
heritage later so again this is always
good practice to set your fonts first in
the body rule set okay so let's move on
now we want to set the font default size
that we want throughout the webpage and
in this case I'm going to set this to 14
pixels now again you can set this to
what you want you may just want to use
the key word remember we talked about
that in the CSS series you can put small
medium or large
now most websites will use small or
medium and this 14 pixels equals of the
smaller pixel size but remember we can
expand this out through percentages in
the child elements that we put in the
body and I'll show you that in a few
videos and we did that in the last
series as well and we're going to do
that again here so again we're just
setting the default font size that we
want throughout the website at 14 pixels
and so let's save this and again if we
open this up we're not going to see much
at this point but yeah there's not much
there all we have is the color but but
these properties will become more
relevant in the next several videos okay
so that's going to do it for the first
video then the next video we will create
the header and the navigation bars see
you guys then