How to Code A footer with Html and CSS for Static Website ?

Amir Hussain March 30, 2024
How to Code A footer with Html and CSS for Static Website ?


Just like a building needs a strong foundation, your website benefits from a well-crafted footer. 


It's the section that graces the bottom of your pages, often providing key info and leaving a lasting impression on visitors. 

 Creating a footer for a static website is a breeze. We'll use two languages that work together like peanut butter and jelly, HTML and CSS.

Building the Base: HTML


HTML, or Hypertext Markup Language, is the building block that defines the structure of your web page. Here's how to create the footer using HTML:

Open your favorite code editor. Text editors like Notepad++ or Sublime Text work well.

Start with the basic HTML structure. Every web page needs this, so if you're new to coding, don't worry, it's just boilerplate code.

It'll look something like this:

 
index.html 
     <!DOCTYPE html> 
<html> 
<head> 
<title>Your Website Title </title>
 </head>
</body>
</html>
Nest the footer section. Within the <body> tags, create a section specifically for the footer using the <footer> tag. Here's how it would fit in:



index.html 
     <!DOCTYPE html> 
<html> 
<head> 
 <title>Your Website Title </title>
     </head>
<body>
         <footer>  </footer>
</body>
       
</html>
Now you have a designated spot for your footer.

Adding Style: CSS


Cascading Style Sheets (CSS) is the language that adds pizazz to your HTML structure. It lets you define colors, fonts, and layouts to bring your footer to life.

Create a separate CSS file. This keeps things organized. Name it something like "style.css" and save it in the same folder as your HTML file.

Target the footer element. Use a CSS selector to tell CSS which part of your HTML code to style. In this case, we want to style the <footer> section. 

Here's how to do it in your CSS file:


File.Css 
        footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

Design your footer

Within the curly braces {}, you can add all sorts of styling rules. 

Here are some common ones to get you started: 

 background-color: Set the background color of your footer (e.g., background-color: #333; for a dark gray). color: Define the text color (e.g., color: #fff; for white text).

 padding: Add space around the content within the footer (e.g., padding: 20px; for 20px of padding). 

 text-align: Align your footer content to the left, right, or center (e.g., text-align: center;).

Putting it All Together

Link the CSS file to your HTML. In the <head> section of your HTML file, add a link tag that references the CSS file. 

This tells your HTML to use the styles you defined in your CSS file. 

Here's how to do it:


index.html 
     <!DOCTYPE html> 
<html> 
<head> 
<title>Your Website Title </title>
<link rel="stylesheet" href="style.css">
 </head>
</body>
</html>

Fill your footer with content. 

Back in your HTML file, within the 
 tags, add the information you want to display. 

This could include: Copyright information (e.g., © 2024 Your Name) 

  •  Contact details 
  •  Email address
  •  Links to social media pages 
  •  A short tagline or message 

With HTML and CSS, you can create a footer that's both informative and stylish. 

Play around with different colors, layouts, and fonts to match the overall look and feel of your website.


Here are some extra tips:

Keep it simple. Don't overload your footer with too much information.

Use clear calls to action. If you want visitors to contact you or follow you on social media, make it easy for them to do so.

Make it responsive. Your footer should look good on all devices, from desktops to smartphones.



Note;-

In Above Examples We Shared only Examples Customise Codes as your needs.
Tags:

Post a Comment

0 Comments