CSS Layout Tutorial - 13 - Working in the header Video Lecture - Learn

in this video we're going to add a
heading to our header I guess that's the
best way to put it and this will serve
as the logo for our webpage so let's go
ahead and take care of that so let's go
ahead and add a heading and I'll just
copy and paste in here we're going to
use h3 we've already used up h2 and h1
in the previous tutorials it doesn't
matter you can arrange these in any way
you want some people want to make this
h1 but I don't really care either way
but we're going to use h3 as I said
because we've already used h2 and h1 so
we'll save this and we'll open up our
web page and as you can see now we need
to style this because this is stuck up
here in the top left so we'll go all the
way to the bottom here where our heading
section is and I'll copy and paste in
here and now we've got our h3 rule set
and I'll copy and paste our first set of
roles in here and so we're going to
increase the font size by 250 percent
because this is going to be our logo
sized text so we want this to really
stand out we want to Center this text we
want this to be right in the center of
our header and we're going to use this
for the color of the text it's kind of a
nice off-white and I like to use century
gothic for the font so let's save this
and let's open up our web page and there
you can see we've got our nice logo now
but it's stuck at the top and we'll deal
with that in a minute now you will
notice that 10 pixels of margin were
added and this is a little strange but
what happened well here was that this h3
element actually inherited from the
header up here this 10 pixels on the top
apparently so what we need to do is set
the margin to 0 pixels down here and
that will ensure that our h3 element now
adds no extra pixels to the margin you
can see it's back to normal so we have
this horizontally centered now what we
need to do is Center this vertically and
that is a little bit complex and so
let's go ahead and do that
and we'll make an extra space down here
to copy and paste the new rules in and
there they are and these are the CSS
rules that are going to vertically align
our text as well so let's save this and
let's open this up now and there you can
see we've got this nice logo now and
it's vertically aligned now one thing I
want to point out is that a lot of
websites these days are using lowercase
for the text in their logo so that's
kind of what's going on today so that's
why I kept this all in lowercase now
some people will capitalize this I'll
leave it up to you but I like to keep
everything lowercase because that's kind
of the trend today so let's close this
out now in terms of these rules right
here this is for a more advanced
tutorial to explain how this works you
don't need to really understand this
right now all you need to know is that
these five rules will always vertically
align your text so you could actually
reuse these without really having to
know how they work but again relative
positioning is quite complex and I will
do a future tutorial on how this works
along with this transform property but
again you could reuse these these exact
five rules to vertically align any text
you want so let's go ahead and save
everything up and that is it for this
tutorial I will see you guys in the next
tutorial when we will deal with the
footer see you guys in