CSS Layout Tutorial - 14 - Working in the footer Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in this video we're going to look at the
footer and we're going to add some
buttons as well some relevant
information to the footer and so first
let's take a look at the HTML and we'll
scroll down here and here of course is
the footer and it is empty at this point
but we're going to enter some
information into here right now
now the footer sometimes does not get a
lot of love but it should because you
should put some relevant links about
maybe yourself about employment or
careers or even a Help section that's
usually where this type of information
goes and you might put a copyright in
here so I'll show you how to do the
copyright first and then we'll do the
buttons so I've already typed it out and
I'll just copy and paste in here as I
always do
now this ampersand copy will generate a
copyright icon and I'll show you that in
a second and then you want to put a
semicolon and then whatever it is your
copywriting in this case maybe your
website and you say all rights reserved
so let's go ahead and save this we'll
open up our index.html and if we go to
the bottom we see that we've got a nice
little copy right here but we need to
add some styling now and let's do that
in our CSS spreadsheet so let's close
this out and in the spreadsheet let's go
all the way down to where our footer was
and we need to add some more rules to
our footer rule set so let's move right
below our border-radius rule and i've
already typed a sell out so as usual
I'll copy and paste it so this will be
the color of the text and I'll show you
that in a second we're going to Center
the text we're going to add 15 pixels of
padding and we're going to actually set
the font size at 90% and this is the one
I want to talk about usually you want
your fonts in the footer to be the
smallest part of your website because it
will usually be the least looked at
obviously it's your main content that
most people are going to be looking at
so you want that enlarged but most web
developers will actually set this at
around 90% so again we're reducing that
by 10% from what we set in our body up
here at 14 pixels okay so let's go ahead
go back down here and let's go ahead and
save this and we'll open up our page and
now we've got this nice and centered but
we're going to put some buttons above
this so this will fill in a little bit
more in a few minutes so let's go ahead
and close this out and now of course
let's switch back to the HTML and of
course we have to add ul and Li tags for
our buttons and I've already typed that
out so paste it in here and we want
these buttons to be above our copyright
notice so we'll go I'll go ahead and
copy and paste this and there you can
see I added an About section for our
website a career section a Help section
and a Contact Us section so let's save
that up let's open up our index.html and
you can see these will be unformatted
doesn't look very good right now right
but we're about to format them and these
will look very nice so let's close that
out now what we can do is actually copy
the existing buttons that we had for our
navbar and edit those that's the nice
thing about CSS we can reuse some of
this code now obviously we're going to
put footer for each one of these but we
can actually use most of this code
almost all of it not all of it but most
of it so let's go ahead and copy and
paste all four of these rule sets right
to here so we want the navbar ul the
navbar uli the navbar ul I anchor and
the hover so we're going to get all four
of those rule sets and we'll put these
right below our footer and let's just
copy and paste now the first thing we're
going to do is rename these to footer
because we don't want this to conflict
so this will be for the footer and again
it's going to be the same for rule so
that makes it really easy for us to
reuse this we're just going to do a
little bit of editing but it'll be very
similar to what we did in the navbar all
right let's save that and now let's
start to edit these so we'll start first
with the UL okay so for the first rule
set right here we're going to get rid of
the background color we don't want
lack so we're just going to get rid of
that now we will keep the in line the
same we'll keep the display type is in
line now for the anchor we're actually
going to switch the color to that color
and you'll see in a minute it's kind of
like this beige color and for the
background color we're going to use this
X code and you'll see it in a few
seconds so that's what we're going to
change for the anchor rule set and we're
going to keep the hover rule set the
same as what we had in the nav bar so
that's going to stay the same so let's
go ahead and save this and we'll save
everything up let's open this up we go
down here and there you can see we've
got these nice buttons now that will
link to other pages in our website okay
that is going to do it for this video
now what I want you to do is I want you
to rename this folder actually to liquid
or flexible whatever you want to call it
because we're going to look at fixed
layouts in the next video so we're done
with the flexible layout for now so go
ahead and save that and then in the next
video we'll get started with some new
code for a fixed layout see you guys on