CSS Layout Tutorial - 19 - Adding a logo to the layout Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

so I've had a lot of requests from
people on how to add a logo to the
header section in their HTML document
and if I get enough questions I guess
it's time to do a video on it so that's
what we're going to do in this video now
we're going to use the fixed layout that
we've used in the last several videos
but you could use this for the fluid
layout that we did earlier you could use
this procedure in any type of layout
that you want so first thing I want you
to do is go ahead and open up your
website folder and I want you to copy
the logo that you're going to use into
that folder and let's just go ahead and
open this up and this is the logo that I
designed actually in Photoshop quite a
while ago I probably should do a video
on this by the way but you know there's
never enough time in the day now you can
use square logos you can use rectangles
circles whatever you want to use I
generally like to use squares but you
can use whatever you want
so again copy that to your website
folder and let's just open up our
website here really quickly and of
course this is where we want to add our
logo right into our header section so
let's go ahead and close this out so the
first thing we need to do of course is
add the HTML we need to have that in
place and of course this is an image so
we can go ahead and just use this IMG
code that we already have let's just
copy that and we'll paste it right up
into our header div there we go now of
course the name isn't Rome dot PNG we
use that in the last lecture it is logo
and I believe it was a JPEG file so
let's just put that in here
and there we go so let's go ahead and
save this and let's reopen up our web
page and just see what this looks like
and there you can see it's way too big
for our web page so we need to shrink
that and size it to our header now you
might be asking well why did it do that
since it was already inside the header
why didn't it automatically size and
that's because we just put in the raw
HTML the browser doesn't know any better
it's going to use the original size of
the image so we need to shrink this at
least to the size of the header now you
could do what we did in the last video
you could go ahead and reduce that in
Photoshop or Microsoft Paint but a bunch
of people ask me how do I do this
in CSS and that's what I'm going to show
you in this video so remember that an
IMG element we talked about this a long
time ago in the series is an inline
element in order to Center it we need to
convert that to block and you'll
remember we use the display property but
first we need to actually create some
CSS so let's just go ahead and copy and
paste this body rule set and we'll go
all the way to the bottom and we'll just
paste this here and of course we're
going to go ahead and use the IMG type
selector so that's what we're going to
select the IMG and as I said the first
thing we need to do is convert it to a
block level element that will allow us
to Center it so you know what I'm sorry
about that I got ahead of myself we
actually want to shrink this first so we
need to use the max width and max height
properties so I'm going to go ahead and
just copy and paste this in here I've
already got this typed out and I'll
explain that so there we go we got the
max width we got the max height we want
to set that to 100% that will expand it
to the width and height of our header
section or our header div and you might
ask well why didn't the browser know to
do that well it doesn't again that was
just the raw HTML here we are saying hey
expand this out to the exact width and
the exact height of the element that the
IMG is inside of in this case by the way
it is the header this div right here so
this now should expand out appropriately
in terms of the width and height so
let's go ahead and save everything up
and we'll see if this works
and it did and you'll notice it actually
keeps the original aspect ratio to this
little square didn't try to make this a
rectangle it'll keep the original aspect
ratio which was a square which is what
we wanted so that fits nice and neat now
maybe you want this logo right here on
the left and that's fine you don't have
to do anything at this point but what if
you wanted to have it on the right or
you wanted to go ahead and put this in
the center well we need to do a couple
different things first if you want it
all the way to the right we can just
float it right so let's go ahead and do
that and we'll just put in float and
then right and let's go ahead and see
what we get
and there you can see it's now all the
way on the right so again you can
certainly go ahead and do it that way if
you want it and some people actually do
that you'll see a lot of websites put
their logo all the way on the right but
others will actually put it on the
center you don't see it on the left
quite as much but most of the time it's
either in the center or on the far right
so let's go ahead now and I'll show you
how to actually Center this if you wish
to do so so as I said in the beginning
we need to make this IMG element a black
element because by default it is inline
and you'll remember that from those
videos I did earlier so let's go ahead
and we'll make this a block level
element and that will allow us now to
Center it so we need to use the margin
left and margin right properties and
I'll go ahead and just copy and paste
those in here and there we go
and the value that we use is auto auto
will Center it that's the value that you
use if you use auto it will
automatically Center it so by using Auto
basically what you're saying here is hey
Center this all the way from the left
and center this all the way from the
right so that's how that works so let's
go ahead now and we'll save this and
let's see what we get and there you see
it's now centered so those are some of
the CSS strategies that you can use when
you're adding a logo to your header
section