How To Create a Static Footer With HTML and CSS (Section 7) | DigitalOcean (2023)

Introduction

In the final tutorial of the CSS series, you will create a static footer that stays in a fixed position at the bottom of the viewport as the visitor scrolls down the page. This tutorial will recreate the footer in the demonstration website but you can use these methods for other website projects as well.

How To Create a Static Footer With HTML and CSS (Section 7) | DigitalOcean (1)

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

This tutorial uses several social media icons as content in the footer. If you’d like to use these icons, download them now from our demonstration site and save them to your images folder as:

To download these images, click on the linked filename above and then click CTRL + Left Click (on Macs) or Right Click (on Windows) while hovering on the image and select “Save Image As”. Save the images with the instructed file names to your images folder.

Once you have your icons saved, you can proceed to the next section.

First you will define a “footer” class by adding the following code snippet to the bottom of the styles.css file:

styles.css

(Video) How to Create a Sticky Footer Using CSS Flexbox

. . ./* Footer */.footer { position:fixed; bottom:0; left:0; width:100%; height: 90px; background-color: #D0DAEE;}

Save the styles.css file. In this code snippet you have added a comment to label the CSS code for the Footer section. You then defined a class named footer and declared several style rules. The first rule declares its position as fixed, which means the element will not move from the location you specify as the user scrolls down the page. This location is specified by the next two declarations: bottom:0 and left:0, which specifies a location zero pixels from the left and zero pixels from the bottom of the browser’s viewport.

By changing these values, you can change the location of the element on the page. Note, however, that any value aside from zero needs to include the px suffix after the number. The ruleset also specified the width, height, and background color of the footer class.

You are now ready to add the footer content in the next section of this tutorial.

Adding a Footer Styled With Your Footer Class

To add the footer content, you will add a <div> container to the webpage and assign the footer class that you just created. Return to your index.html file and paste the following code snippet after the end of the last closing </div> tag:

index.html

. . .<!--Section 7: Footer--><div class="footer"></div>

Save your index.html file and reload it in the browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser).You should now have an empty footer section at the bottom of your webpage that stays in place as you scroll up and down the page:

How To Create a Static Footer With HTML and CSS (Section 7) | DigitalOcean (2)

Next you will add content to the newly created footer.

(Video) How to make a footer for website using html css | How to make footer for website | Web Coding Pro

In this step, you will add and style the menu items to the left side of the footer. These menu items can be used to link to other pages on your site. Currently, there is only one webpage on your site, so you can use the links we provide for demonstration purposes. Later on, if you add additional pages to your website you can create menu items here and add the correct links. You can learn how to create and link to new webpages with this tutorial on How to Build a Website with HTML.

Return to your styles.css file and add the following code snippet to the bottom of the file:

styles.css

. . ..footer-text-left { font-size:25px; padding-left:40px; float:left; word-spacing:20px;}a.menu:hover { background-color:yellow; font-size:20px;}

Let’s pause briefly to review each of the rulesets we’ve created:

  • The first ruleset defines a class named footer-text-left that will be used to style the menu item text. Note that you are setting the float property to left so that the text assigned to this class will float to the left of the page. You are also using the word-spacing property to grant extra space between the menu items. If any of your menu items are more than one word, you’ll need to create a class for styling the menu items (instead of just changing the word spacing value).

  • The second ruleset uses the hover pseudo-class to add a yellow background color to the text when the user hovers their cursor over the text.

Now you will add the menu items to the webpage. Return to your index.html file and add the following highlighted code snippet inside the footer container that you’ve already created:

index.html

(Video) How To Make Website Footer Design Using HTML And CSS Step by Step Tutorial with Responsive

. . .<div class="footer"> <p class="footer-text-left"> <a href="index.html" class="menu">home</a> <a href="https://css.sammy-codes.com/about.html" class="menu">about</a> <a href="https://css.sammy-codes.com/credits.html" class="menu">credits</a> </p></div>

This code snippet adds two menu items (“about” and “credits”), links these menu items, and styles the text with the footer-text-left and a.menu classes you just created.

Save both files and reload your webpage in the browser. You should receive something like this:

How To Create a Static Footer With HTML and CSS (Section 7) | DigitalOcean (3)

Adding Social Media Icons

Next you will add the social icons to the footer, which you can use to link to your social media accounts. If you want to use icons for different social media platforms, you can search for free icons on the web and download them to your images folder. Return to your styles.css file and add the following three rulesets to the bottom of your file:

styles.css

. . ..footer-content-right { padding-right:40px; margin-top:20px; float:right;}.icon-style { height:40px; margin-left:20px; margin-top:5px;}.icon-style:hover { background-color:yellow; padding:5px;}

Let’s pause to review each ruleset:

  • The first ruleset defines the class footer-content-right and assigns it specific padding, margin, and float values. You will use this ruleset to style a <div> element that will hold the social media icons.

  • The second ruleset creates the class icon-style that will provide height and margin values to the size and position of the social media icons.

    (Video) Creating Sticky Footer with HTML and CSS

  • The third ruleset uses the hover pseudo-class to add a yellow background to the icon when the user hovers their cursor over the text.

Save your styles.css file. You will now add the social media icons to the footer. Return to your index.html file and add the following code snippet after the last closing </a> tag of the menu items:

index.html

. . ....<div class="footer-content-right"> <a href="https://github.com/digitalocean"><img src="images/github.jpeg" class="icon-style" alt="Github icon"></a> <a href="https://www.twitter.com/DigitalOcean"><img src="images/twitter.jpeg" class="icon-style" alt="Twitter icon"></a> <a href="https://www.twitter.com"><img src="images/email.jpeg" class="icon-style" alt="Emailicon"></a></div>

Make sure that you change the file paths and links with your own social media information.

This code snippet creates a <div> container, which is assigned the style of footer-content-right the class. Inside this div container, you have added three social media icons using the HTML <img> tag, and linked each image using the HTML <a> tag.

You have also added the alternative text that describes each icon using the alt attribute. When creating websites, alternative text should be added to all images to support site accessibility for individuals who use screen readers. To read more about using alternative text with HTML, please visit the section on alternative text in our guide How To Add Images To Your Webpage Using HTML.

Save your index.html file and reload it in the browser. You should now have a fixed footer with three social media icons on the right that link to your accounts. The links should change color when the user hovers their cursor over them. To confirm your results, you can compare them to the gif at the beginning of this tutorial.

Conclusion

You have now created a static footer that stays in a fixed position at the bottom of the viewport as the visitor scrolls down the page. You can continue exploring footer design and content possibilities by changing values in the CSS classes that you created, or add different types of content to your index.html file. For more ideas on exploring design and layout possibilities for your website, the conclusion of this tutorial series has more suggestions for things to try like rearranging content sections, adding links to other pages, and changing layout styles using the box model.

(Video) Stick Footer at Bottom of Page Using HTML & CSS | Footer Design

FAQs

What is footer in HTML CSS? ›

The <footer> tag in HTML is used to define a footer of HTML document. This section contains the footer information (author information, copyright information, carriers, etc). The footer tag is used within the body tag.

How do I make the footer at the bottom of CSS? ›

The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer. Since the footer is the only body child that has a display as table-row , it is rendered at the bottom of the page.

How do I make a header and footer static? ›

Answer: Use CSS fixed positioning

You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.

How do I create a footer in HTML? ›

How to Make a Footer in HTML and CSS for Beginners Tutorial - YouTube

How do I code a website footer? ›

The <footer> tag in HTML defines a footer for a document or a section of a web page. Footers usually contain the author of a document, contact information, and important links. A footer at the bottom of a section will include any final information related to the content in that section.

How do you create a footer? ›

Go to Insert > Header or Footer. Choose from a list of standard headers or footers, go to the list of Header or Footer options, and select the header or footer that you want. Or, create your own header or footer by selecting Edit Header or Edit Footer. When you're done, select Close Header and Footer or press Esc.

How do I add a copyright footer in HTML? ›

Copyright HTML Reference

Use the HTML Entity Name or Number to create the special character. Wrap &copy; or &#169; in a set of <span> tags and get the same result.

How do I put something at the bottom of a page in CSS? ›

If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.

How do you put a header and footer in HTML HTML? ›

For that purpose, we have created an HTML table using the <thead>, <tbody> and <tfoot> tags. HTML <thead> tag: The <thead> tag in HTML is used to create a table header and usually appears after the <colgroup> or <caption> tags and it should appear before the <tbody> and <tfoot> tag.

How do you use header and footer in HTML? ›

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.
...
In HTML there are some semantic elements that can be used to define different parts of a web page:
  1. <article>
  2. <aside>
  3. <details>
  4. <figcaption>
  5. <figure>
  6. <footer>
  7. <header>
  8. <main>

How do you put a header and footer on all pages in HTML? ›

Page Headers And Footers
  1. Create Text Files To Link To Your Web Pages.
  2. Step 1: Open Notepad or any text editor.
  3. Step 2: Type in the HTML code you want to include in the file, with proper formatting. ...
  4. Step 3: Remove all the line breaks in the code. ...
  5. Step 4: Enclose the HTML code inside a document.write statement.

How do you add an image to a footer in HTML? ›

Add a Logo or Image to Footer
  1. Step 1: Navigate to Footer. ...
  2. Step 2: Create a new HTML block. ...
  3. Step 3: Upload your desired image. ...
  4. Step 4: Copy this code. ...
  5. Step 5: Cut and paste image link into code. ...
  6. Step 6: Save and preview.
14 Jan 2020

How do I create a footer in Dreamweaver? ›

Adding a Footer to your Web Design Project in Dreamweaver - YouTube

What is copyright symbol in HTML? ›

Some Other Entities Supported by HTML
CharNumberDescription
©&#169;COPYRIGHT SIGN
®&#174;REGISTERED SIGN
&#8364;EURO SIGN
&#8482;TRADEMARK
8 more rows

How do you add headers and footers in HTML w3schools? ›

How TO - Include HTML
  1. The HTML. Save the HTML you want to include in an .html file: content.html. ...
  2. Include the HTML. Including HTML is done by using a w3-include-html attribute: Example. ...
  3. Add the JavaScript. HTML includes are done by JavaScript. Example. ...
  4. Include Many HTML Snippets. You can include any number of HTML snippets:

What is the footer on a website? ›

Definition: A website's footer is an area located at the bottom of every page on a website, below the main body content. The term “footer” comes from the print world, in which the “footer” is a consistent design element that is seen across all pages of a document.

What should be on a website footer? ›

The website footer is the section of content at the very bottom of a web page. It typically contains a copyright notice, link to a privacy policy, sitemap, logo, contact information, social media icons, and an email sign-up form. In short, a footer contains information that improves a website's overall usability.

What is footer tag in HTML? ›

The <footer> HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents.

What is a sticky footer? ›

A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.

How do you add an image to a footer in CSS? ›

All you need to do is create a <img> tag or a <div> tag and declare the path for the image. Then use float as your CSS rule to position it in your footer. One way of getting around your problem is to make a single background image for your footer consisting of all the 3 images u want to use.

Do I need a footer on my website? ›

Technically, websites don't require footers to function properly; however, they do provide effective locations to add to your website's functionality. This is especially true when combined with tools that help website owners create and deliver their content more efficiently.

How do I separate footers in HTML? ›

I recommend using CSS grids for all HTML templates. Otherwise it can be difficult to keep footer at the bottom for all screen sizes. That being said, try using flexbox. Insert all of your html in main and flexbox will push footer to the bottom of the page.

How do I add background color to footer in HTML? ›

Re: Change background color of footer

In the CSS code panel, click the magnifying glass icon at the top of the code panel and enter the search term ". footer-wrap" and you should arrive at the code below. Add the last line (highlighted in red text) to change the background color.

How do I create a footer template? ›

How to Create a Footer Template With Elementor Theme Builder [PRO]

What is footer code? ›

Footer Code

Whatever is written here will not be shown on your webpage, unless you have specifically programmed it to do so. It will only be visible in the HTML document. This option is often used to track how visitors interact with websites.

Does footer go in body HTML? ›

The <body> tag is generally reserved for visible content on the page whereas <head> tag is used for metadata attributes (like title, fonts, styles...). Since the footer is a visible piece of your site, it should go within the body.

How do I make a copyright footer? ›

Form and Placement of the Copyright Notice:

The copyright notice generally consists of three elements: The symbol © (the letter C in a circle), or the word "Copyright" or the abbreviation "Copr."; The year of first publication of the work; and. The name of the owner of copyright in the work.

How do you write copyright in CSS? ›

You need to use \00a9 for the copyright symbol.

What are CSS selectors used for? ›

In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style.

How do you keep items at the bottom of a div? ›

Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.

How do I put text at the bottom of the page in HTML? ›

force element to bottom of page
  1. footer {
  2. position: fixed;
  3. bottom: 0;
  4. }
5 Mar 2020

How do I put text at the bottom of a div? ›

Use the text-align property to align the inner content of the block element. Use the bottom and left properties. The bottom property specifies the bottom position of an element along with the position property. The left property specifies the left position of an element along with the position property.

What is Template in HTML and CSS? ›

Definition and Usage

The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads. The content inside <template> can be rendered later with a JavaScript.

How do you repeat a header on each page in HTML? ›

This can be done setting a CSS property for the thead element of the html table. The property that needs to be set is: display: table-header-group. The following html table will repeat the table header at the top of each pdf page when converted to pdf.

How do you create a header in HTML? ›

The <header> tag in HTML is used to define the header for a document or a section as it contains the information related to the title and heading of the related content. The <header> element is intended to usually contain the section's heading (an h1-h6 element or an <hgroup> element), but this is not required.

How do I create a header in HTML and CSS? ›

How To Make A Website Header Using HTML And CSS - YouTube

What does CSS stand for? ›

CSS stands for Cascading Style Sheet. CSS can format the document content(written in HTML or other markup language): layout. colors.

How do you link a header to a page in HTML? ›

To add an anchor to a heading in HTML, add a <section> element with an id attribute. Don't use <a name> . Use lowercase for id values, and put hyphens between words. To add an anchor to a heading in Markdown, add the following code to the end of the line that the heading is on.

How do I separate a header and body in HTML? ›

The three elements for separating the head, body, and foot of a table are: <thead> – to create a separate table header. <tbody> – to indicate the main body of the table. <tfoot> – to create a separate table footer.

How do you add a header and footer to a PDF in HTML? ›

$client->setHeaderUrl('https://your-domain/footer.html'); $client->setFooterUrl('https://your-domain/header.html'); The following code will make them 0.7' tall: $client->setHeaderHeight('0.7in'); $client->setFooterHeight('0.7in');

How do you put a header and footer in HTML HTML? ›

For that purpose, we have created an HTML table using the <thead>, <tbody> and <tfoot> tags. HTML <thead> tag: The <thead> tag in HTML is used to create a table header and usually appears after the <colgroup> or <caption> tags and it should appear before the <tbody> and <tfoot> tag.

How do you create a footer? ›

Go to Insert > Header or Footer. Choose from a list of standard headers or footers, go to the list of Header or Footer options, and select the header or footer that you want. Or, create your own header or footer by selecting Edit Header or Edit Footer. When you're done, select Close Header and Footer or press Esc.

How do I put the footer at the bottom of the page in HTML? ›

First set the min-height of body to 100vh. min-height: 100vh; . Set the body display to flex display: flex; and flex-direction to column flex-direction: column; . Select footer element (of whatever you want to stick to bottom) and set top margin to auto margin-top: auto; .

What is Template in HTML and CSS? ›

Definition and Usage

The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads. The content inside <template> can be rendered later with a JavaScript.

How do you add headers and footers in HTML w3schools? ›

How TO - Include HTML
  1. The HTML. Save the HTML you want to include in an .html file: content.html. ...
  2. Include the HTML. Including HTML is done by using a w3-include-html attribute: Example. ...
  3. Add the JavaScript. HTML includes are done by JavaScript. Example. ...
  4. Include Many HTML Snippets. You can include any number of HTML snippets:

How do I make a copyright footer in HTML? ›

Copyright HTML Reference

Use the HTML Entity Name or Number to create the special character. Wrap &copy; or &#169; in a set of <span> tags and get the same result.

What is footer with example? ›

The website footer is the section of content at the very bottom of a web page. It typically contains a copyright notice, link to a privacy policy, sitemap, logo, contact information, social media icons, and an email sign-up form. In short, a footer contains information that improves a website's overall usability.

What is footer code? ›

Footer Code

Whatever is written here will not be shown on your webpage, unless you have specifically programmed it to do so. It will only be visible in the HTML document. This option is often used to track how visitors interact with websites.

What is the footer on a website? ›

Definition: A website's footer is an area located at the bottom of every page on a website, below the main body content. The term “footer” comes from the print world, in which the “footer” is a consistent design element that is seen across all pages of a document.

Do I need a footer on my website? ›

Technically, websites don't require footers to function properly; however, they do provide effective locations to add to your website's functionality. This is especially true when combined with tools that help website owners create and deliver their content more efficiently.

How do I put something at the bottom of a page in CSS? ›

If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.

How do I keep the footer at the bottom of the page with dynamic height? ›

  1. var docHeight = $(document).height(); will work for always keeping the footer underneath the page content. – Nick B. Apr 8, 2017 at 15:12.
  2. I would suggest to use $('#footer').outerHeight(); instead of .height() – Yetispapa. Jan 21, 2018 at 12:03.

How do you use sticky position in CSS? ›

To see the effect of sticky positioning, select the position: sticky option and scroll this container. The element will scroll along with its container, until it is at the top of the container (or reaches the offset specified in top ), and will then stop scrolling, so it stays visible.

Videos

1. How to Always Keep the Footer at the Bottom of A Page | Learn HTML and CSS | HTML Tutorial
(Dani Krossing)
2. How To Make Website Footer Using HTML And CSS | Footer Design For Website
(Easy Tutorials)
3. Easy sticky footer - stop a footer from floating up a short page!
(Kevin Powell)
4. How to Create a Sticky Footer Using CSS Grid
(Front End Beginners)
5. Responsive CSS Sticky Footer
(Codecourse)
6. CSS Footer Design | Responsive footer design HTML CSS
(Divinector)
Top Articles
Latest Posts
Article information

Author: Arline Emard IV

Last Updated: 01/14/2023

Views: 5820

Rating: 4.1 / 5 (72 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Arline Emard IV

Birthday: 1996-07-10

Address: 8912 Hintz Shore, West Louie, AZ 69363-0747

Phone: +13454700762376

Job: Administration Technician

Hobby: Paintball, Horseback riding, Cycling, Running, Macrame, Playing musical instruments, Soapmaking

Introduction: My name is Arline Emard IV, I am a cheerful, gorgeous, colorful, joyous, excited, super, inquisitive person who loves writing and wants to share my knowledge and understanding with you.