CSS Layout Tutorial - 04 - Adding the main content section Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the fourth video on CSS
layouts in this video we're going to add
the main section so let's get going so
let's just go ahead and copy and paste
here like we always do and now what
we're going to do here is we're going to
use a class instead of IDs and we're
going to name this main and of course
you'll remember in the previous series
IDs are for specific elements that are
unique but we're going to reuse this
main content pane again so I want to use
a class for this so let's go ahead and
create some rules for our main class and
we'll just do another copy and paste and
we will rename this to dot main and you
will remember that the dot signifies
class so we are not going to use a hash
tag here we're going to use a dot and we
will keep the margins at ten pixels and
we're going to get rid of the height
property so we're going to have no
height and no width and I'll explain
that in a minute and we'll keep the
border radius at five pixels and we're
going to change the background color to
a lighter color so it's going to be e 5e
4d 7 that's what we're going to use so
let's go ahead and save this and let's
add some padding here and remember that
is the space between the border and the
text and we'll make that 20 pixels now
you can play around with this you can
set this to 10 or 15 pixels you can test
out which one you like the best but I'm
going to use 20 pixels and then we're
going to increase the font size up 10%
so this is at 14 pixels so we're going
to increase this by about 10% and
remember this is an inheritance thing so
this was set at 14 pixels and then we
could increase that size based off what
we set here so it allows us to easily
change the size up here if we want so
again we'll be at 110% so let's save
everything we've got here and we'll save
our index.html and let's open up our web
page and you can see now we've got our
nice section here now in the header and
in the navigation section I didn't add
any content but let's add some content
here because we want some semblance of
the layout so we'll do that right now so
let's close this out now of course you
will see that with no height and
no with this is the default that we get
here right this is what we get there's
nothing in here but we're about to put
some content so let's close this out and
I've already typed this out so I'm just
going to do a copy and paste here and
I'll explain it so here we've got a
heading that I created which is h1 we of
course we talked about that in the last
series and this is going to be a history
site so I've decided to go ahead and
talk about Hannibal and you can probably
tell that I like history a lot so I type
this all in and this is going to be our
paragraph so we have our h1 heading and
our paragraph that's going to go under
it so let's save this and now let's open
this up
and you can see how this sized according
to the content we have so that's why
it's useful that in your main content
section not to put a width or a height
because it will always size
appropriately to the content that you
put in and that's kind of nice now here
we set a fixed height because we don't
want these to expand out but for the
content because this area will be
dynamic we'll be adding more and more
content here we want this to size
appropriately every time we put new
content here and if I set a fixed height
we'd have to reset the height every time
so this makes it easier to maintain the
site so one thing we want to do here is
we want to go ahead and style that
heading we've already expanded the size
of the text and set that at 110% but now
let's go ahead and style the heading so
let's close this out and I already typed
this out so we can just copy and paste
in here and here's our h1 of course so
we'll be styling the h1 element right
here I'm going to increase the font size
by 120 percent because we want the
heading a little bit larger than the
text in our paragraph so we'll put that
at 120 now you can play around these
percentages and get the percentage that
you like and then I put in a color as
kind of a red color so the heading
really stands out so let's go ahead and
save everything and we'll take a look at
our new look and feel so let's go ahead
and open this up and you can see now
we've got this nice heading here now
eventually what we're going to do is
we're going to create a link for this
for the main article so this is kind of
like the the tidbit and then people will
be able to drill into here and we'll
expand out to a full page but this is
our main page and we just want to give
you a taste of what this article is
about and actually we'll put some
thumbnails in here later but you can see
how this expands out nice
so let's add some more content let's add
like another article that we created so
let's close this out and then let's go
ahead and paste I already have this
typed out again so we'll just copy and
paste this in here and here you see now
that I'm reusing the h1 now you can
actually make this an h2 and then this
would be a little bit smaller but I
actually like to use that reuse the h1
because I like the titles to be the same
size but you don't have to do that you
can make this smaller if you want to so
let's go ahead and save this and let's
reopen this up and you can see that this
sized again we've just added the content
and it resized it and fit everything
nice and neat right into here I don't
have to adjust the height I don't have
to adjust the width it does it nice and
neat for us so that is going to be our
main section now in the next video we're
going to add a sidebar over here so this
is going to be what's called the two
column layouts kind of a classic layout
so we're going to have a sidebar over
here and in order to do that we're going
to have to float our sidebar element now
I will copy and paste this entire div
into the message board so that you don't
have to type all this out okay I will
see you guys in the next video