Finish a footer quietly

01 / 04

A footer does not have to stand out

The band at the very bottom of a page is the footer. It is where you put things like contact details and who made it — things that only need to be findable when someone goes looking.

So the goal when you build it is the opposite of everywhere else. You tidy it so that it does not stand out.

02 / 04

No new settings turn up

Everything you use here you already know.

border-top … the break from the main content
padding … room above and below
font-size … smaller text
color … a paler text colour
text-align: center; … lined up in the middle

The only new thing this time is how you combine them.

.footer {  border-top: 1px solid #cfd8cf;  padding: 28px 0;  text-align: center;}

03 / 04

Small text, pale colour

If the body text is 16px, the footer wants about 13px. Make the colour grey rather than pure black too.

Small plus pale says "this is not the lead".

.footer {  font-size: 13px;  color: #6a7b6d;}

04 / 04

Inside, it is two boxes again

When you add a background colour, build it as the same "band plus container" as before. The footer does not need a special construction of its own.

Keeping the same construction from the top of the page to the bottom saves you hesitating when you come to fix things. Have a go.

<div class="footer">  <div class="container">    <p>Harbour Workshop</p>  </div></div>