CSS Layout Tutorial - 03 - Adding header and navigation section Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the third tutorial on CSS
layouts so we are continuing right along
from the last video and we are going to
add the header and navigation bar
sections and so let's start in the HTML
of course and so what do we need we need
a div tag of course to create those
sections so let's do that and we're
going to use IDs here instead of generic
classes so we're just going to use an ID
to identify this because this is going
to be a unique section and we'll give it
a relevant name we'll call this header
and let's just go ahead and copy and
paste this and then our next section is
going to be the navigation bar and we're
just going to call this nav one for
navigation bar and we're not going to
put any content in here right now we're
just going to set up the layout
later on we'll actually put some content
in here we'll actually do a logo and
stuff like that but for now we just want
to get the layout set up first and
actually you know let's call this navbar
a little bit more representative so
let's go ahead and we'll just copy and
paste this here and we'll rename this to
header and you'll remember from the CSS
series that when we use IDs we need hash
tags so let's put a hashtag in front of
our header and we're going to go ahead
and clear out these two rules and we're
going to set the margin to 10 pixels so
we'll have 10 pixels of margin space
around our element and we're going to
change the background color so we're
going to override the color that we set
in the body and again I already have the
hex code available and it's going to be
5c 755 easy and let's give this a height
of about 90 pixels and that's pretty
standard you can up that if you want to
110 or if you want it a little bit
bigger but we'll just say 90 pixels for
the height
and let's go ahead and save this and we
also have to save our index.html and
let's open this up and there you can see
we have our first section and as I said
again we'll put in our content here
which will probably be a logo or
something so that's good we've got that
down and you can see we've got that 10
pixels going around here and remember
the margin is always transparent so we
will see the background color which of
course we set to that army green color
which we did in the last video
okay so let's close that out and now
let's create our navbar so we'll just do
another copy and paste here and again we
need the hashtag so we'll call this
navbar and we're going to keep the same
background color so we'll use that and
actually we're going to keep the same
margin so that will all be the same but
we're going to reduce the height a
little bit to 35 pixels so let's save
this and we'll see what we have and now
you can see we've got our navbar under
our header and the reason this is going
to be thinners because we're going to
put buttons in here for our menu so
we'll put a home button here and some
other buttons and we'll do that later so
we'll fill that in later but you can see
we've got our layout going here and it's
pretty good now you'll notice that we
did not put in widths we're just going
to put in a height property because we
want this to be responsive we want this
to be a liquid web site that is we want
this to size accordingly to where the
user has their browser set in terms of
the size of their browser so as they
minimize it or maximize it our elements
will size accordingly so no width for
our header or our navbar element we are
merely just going to define a height and
that works very nicely and again this
fits into this liquid responsive website
design that we want to do the other
thing I want to point out is this 10
pixel margin now that we have around our
elements and that is what you call a
gutter people refer to that as a gutter
and that's where you use the margins to
separate the elements and it's kind of
pleasing to the eyes so all the future
elements that we add will have this
little gutter around it and it's kind of
nice to have so that these aren't
crammed right up next to each other now
if you don't want that you can remove
the margins but I don't really think
that looks too good I actually like to
have this these gutters as they are
called all around the elements so every
other element we have will always have
that 10 pixel margin space now some
people are like the sort of rectangular
look to have these edges pointed others
want to put a radius so if you like the
pointed edges you can keep that or you
can add a little bit of radius I'm just
going to add a little radius to this to
show you guys what it looks like and
we'll keep that but again if you don't
want that you can just comment out the
code that I'm going to put in so what we
will do is use the border property and
we will say border radius and we're
going to curve it about five pixels
that's standard you can make that lower
if you want you could make that two
point five pixels if you wanted to and
let's just go ahead and copy and paste
that into our navbar because we want all
of our elements to have this so let's
say this and there you can see now we
have this nice five pixel radius around
the corners of our header and our
navigation bar so that's going to do it
for this video in the next video we are
going to add a main content pane