CSS Footer Styling “HTML”
Design Footer of website with CSS
In this tutorial we will learn a new thing of CSS, that is website footer credit. Here we read and learn how to make a simple and fantastic footer in HTML and designing with the CSS properties. We also provide you a source code with programming example and output of programming.
Here you will read from beginning to end, how the footer of a website is made with HTML and designed by CSS properties. With programming source code.
CSS Footer
In websites the “footer” is a main part to give information about sites. It is on the bottom of the website and webpages, it may contain some links of pages, copyright and other additional information are given about the sites. CSS footer provides a great way to organize the websites.
Simple Footer
To prevent unexpected result, you should set all elements, box-sizing property of border-box. And make sure that the padding and border don’t add and up to the actual width and height of the element.
Don’t forget to use the <header>, <main> and <footer> elements in your webpages to work properly. To design beautiful and fantastic footer, you need to remove the default margin and padding of your document so that there is no space around the footer. Look below programming code;
Programming of a simple Footer of webpages;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Site Footer</title> <style type="text/css"> *{box-sizing: border-box;} html, body{padding: 0; margin: 0;} body{display: flex; min-height: 100vh; flex-direction: column;} main{flex: 1 0 auto; background: lightblue;} footer{background: lightgreen; height: 100px; padding: 15px; color:blue;} </style> </head> <body> <header></header> <main></main> <footer> Here your footer content are goes, like "copyrignt and some pages". </footer> </body> </html> |
Output of above programming examples;
Above you can see the output of programming examples, this is the simple footer of pages, simple container of footer credit.
- One point, you have to make sure that the footer always stays of sticks at the bottom of the webpages even with less or more contents.
Footer with Contents (Stylish Footer)
Now here we read and make a programming footer with the content and some pages. And our footer sticks to the bottom and we can put content in the footer, lets the look below programming examples;
Programming of Footer with contents;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Site Footer</title> <style type="text/css"> *{box-sizing: border-box;} html, body{padding: 0; margin: 0;} body{display: flex; min-height: 100vh; flex-direction: column;} main{flex: 1 0 auto; background: lightblue;} footer{background: rgb(93, 69, 197); position: relative; color:white; text-align: center; line-height: 18px;} #logo img{height: 30px; width: 35px;} .f-copyright{width: 100%; height: 30px; padding: 5px; background: rgb(22, 18, 18); position: absolute; bottom: 0px; left: 0px;} .f-body{margin-bottom: 25px; padding: 10px;} .f-body> div:first-child{font-size: 120%;} .f-body ul{list-style-type: none; margin: 0; padding: 0; text-align: center;} .f-body li> a{color: white; text-decoration: none;} p{margin-top: 10px;} </style> </head> <body> <header></header> <main></main> <footer> <div class="f-body"> <div><span id="logo"><img src="StudyMuch Logo.png"alt=""></span>Your Brand Logo Here.</div> <div><p>StudyMuch is a educational website, our moto is to give knowlwdge to the people and learn.</p> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Contect Us</a></li> <li><a href="#">Terms and Conditions</a></li> </ul> </div> <div class="f-copyright">© Copyright Goes Here.</div> </footer> </body> </html> |
Output of above programming example;
You can see above programming example, a container of footer is fill with content like logo, about the site and some pages also, that things are need to a webpage’s footer. You can design it your choice.
Stylish Footer (Tow Column Layout)
Here we made a Stylish Footer with two column layouts inside the footer container. You look below programming coding and understand well. You can copy this code and apply with your awn project and try to make better than with this below program.
Programming of Stylish Footer with (Two Column Layout)
<!DOCTYPE html> <html> <head> <title> CSS Footer Style </title> <style type="text/css"> * { box-sizing: border-box;} html, body { margin: 0; padding: 0;} body { display: flex; min-height: 100vh; flex-direction: column;} main { flex: 1 0 auto; background: lightblue;} footer { color: #fff; background: rgb(32, 83, 19); position: relative; font-size: 70%;} .f-copyright { width: 100%; height: 30px; background: rgb(2, 94, 136); padding: 10px; position: absolute; text-align: center; left: 0px; bottom: 0px;} .f-body { margin-bottom: 30px;} .f-body::after { content: ""; display: block; clear: both;} .f-body > div { float: left; padding: 10px;} .f-body > div:first-child { width: 40%; text-align: center;} .f-body > div:last-child { width: 60%;} img{height: 100; width: 80px;} .f-body ul { list-style-type: none; margin: 0px; padding: 0px; text-align: center;} .f-body li > a { color: white; text-decoration: none; margin-bottom: 7px; #logoo{text-align: center;} </style> </head> <body> <header></header> <main></main> <footer> <div class="f-body"> <div><img src="StudyMuch Logo.png" alt=""></div> <div> <p> StudyMuch is a educational website, our moto is to give knowlwdge to the people and learn. </p> <ul> <li><a href="#"> About </a></li> <li><a href="#"> Contact Us </a></li> <li><a href="#"> Terms & Conditions </a></li> <li><a href="#"> Privacy Policy </a></li> </ul> </div> </div> <div class="f-copyright"> © Copyright Goes Here. </div> </footer> </body> </html> |
Output of above programming;
Above you can see the output of programming, it is different from the above one programming. You can style it yourself and make better than it, it helps you to design your project and you can get help from this website.
So, in this tutorial we learned how to make a website’s footer and styling with CSS properties, here you see three types of footer style, one is simple and left two is stylish in different – different style. I hope you read this tutorial well and learn something from this tutorial. If you have any doubt from this tutorial, you can ask confidently in comment section, I try to help you.
Read Also-
- Learn All Tutorial of HTML with programming examples.
- Learn about Internet, how internet is working?
- Learn HTML Embed YouTube Video.
- Learn HTML Table Tag full tutorial with Examples.
- Learn All Tutorial of CSS with Examples.
26 Comments
fawned · December 20, 2022 at 1:24 am
wһoah this blog is fantastic i гeally like studying
your articlеs. Stay up the great worк! You realіze, many persons are seаrching aгound for this infoгmation, you can aid them greatly.
ligget · December 28, 2022 at 2:52 am
Howdy! Thiѕ post couldn’t be written any better!
Reading through this post rｅminds me of my good olԁ room mate!
He alwaｙs keⲣt ϲhatting about this. I will forԝard this post to him.
Pretty sure he will have a good read. Many thanks for sharing!
q · January 13, 2023 at 9:04 pm
Very shoгtly this site will be famous among all blogging users, due to it’s good articles or reviews
a · January 21, 2023 at 7:14 am
Hello thｅre! I know this is kinda off topic however
I’d fiցured I’d ask. Would you be interested in trɑding links
or maybe gueѕt authoring a blog article or vice-versa?
My website covers a lot of the same subjects as yours and I feel we could greatly benefit fгom each otheг.
If you might be interesteⅾ feel free to shoot me an e-mail.
I loοk forward to hearing from you! Wonderfuⅼ blog by the way!
j · February 3, 2023 at 5:27 pm
Your stүle is unique in comparison to other folks I’ve read stuff frοm.
I appreciate you for posting when you’ve got the opportunity,
Guess I will just book mark thiѕ page.
moles · February 16, 2023 at 9:05 pm
WOW just what Ι was searching for. Came here by seɑrching
for ѕirs
kenneth · March 12, 2023 at 7:56 am
Woԝ, ᴡonderful webⅼoɡ format! How lengthy hаve yoᥙ been blogging for?
you made running a blog gⅼance easy. Ꭲhe overalⅼ
glance of your website is wonderfuⅼ, let alone the cοntent!
conceited · March 19, 2023 at 10:28 am
This iѕ ｖery interesting, You are an overly skilleɗ blogger.
I’ve joined your rѕs feed and look forward to loоking for more of your gｒеat
post. Aⅼso, I have shared your web site in my social networks
calico · March 27, 2023 at 7:44 pm
Fine way of exⲣlaining, and fаstidious piece of writing to obtain facts regarding my presentation subject matter, which i am going to present in іnstіtutіon of higher educatіon.
misgiving · April 14, 2023 at 12:15 pm
Тhanks , I’ve just been looking for infoгmation approximately this
subject for ageѕ and yours іs tһe greatest I
have discoｖеred so faг. However, what in regards to the bottom
line? Are you positive concerning the source?
imagery · April 17, 2023 at 4:25 pm
Hmm is ɑnyone else eⲭperiencіng problems with the images on this blog loading?
I’m tｒying to determine if its a probⅼem on my end or if іt’s the blߋg.
Any responses wⲟuld be ɡreatly appreciated.
prevailed · April 27, 2023 at 11:56 am
аlways i used to read smaller posts which also clear their motive, and that is aⅼso happening with this piece of writing whіch I am reading now.
ventricle · April 28, 2023 at 12:13 am
Hello it’s mе, I am also visiting this website on a regular basis, thіs web ѕite is gеnuinelｙ good and the people are
in fact sharing nice thoughts.
gate io türkiye · May 4, 2023 at 4:31 am
I am an investor of gate io, I have consulted a lot of information, I hope to upgrade my investment strategy with a new model. Your article creation ideas have given me a lot of inspiration, but I still have some doubts. I wonder if you can help me? Thanks.
heart disease · May 8, 2023 at 12:03 pm
Pｒetty! This has been an extremely wonderful p᧐st.
Thanks for providіng theѕe details.
our · May 8, 2023 at 10:21 pm
It’ѕ going to be end of mine day, however before finish I am reading this imⲣresѕіve piece ⲟf writing to increase
my knowledgｅ.
methuen · May 9, 2023 at 2:35 am
Νice blog here! Also your site so much ᥙp fast!
What hoѕt are you the use of? Can I am getting your asѕociate link to your host?
I desire my web site loadeⅾ up aѕ quickly aѕ yours lol
z · May 9, 2023 at 9:41 am
Simply desire to ѕay ʏour ɑrticle is as surprising.
The cⅼearneѕs to ｙour publish is just nice and i ϲan suppose
you aｒe an expert on this subject. Fine with your permission let me to clutch your feed to keep upɗated with imminent post.
Thanks 1,000,000 and pleaѕe keep up the rewarding
work.
falsify · May 10, 2023 at 11:58 am
Hｅllo, Neat post. There is an issue togetһer with
your web site in web explorеr, might test this?
IE still is tһe market chief and a hսge element of other people will
miss your fantastic writing due to this problem.
fan · May 10, 2023 at 10:54 pm
Very ցood post! We will be ⅼіnking to this grｅat post on our website.
Keep uρ the greɑt wｒiting.
neuroses · May 11, 2023 at 12:42 am
Wһats up very cool web site!! Guy .. Beɑutiful .. Superb ..
I’ll bookmark your web site and take the feeds adԀitionally?
I’m satisfied to search out numerous useful information rigһt here within the publiѕh, we need work out extra strategieѕ on tһis regard, thank you for sharing.
. . . . .
vivid · May 16, 2023 at 1:59 pm
Hurrɑһ, that’s what І was looking for, what a materiɑl!
presｅnt herе at this web ѕite, thanks aԁmin of
this ᴡeƄsite.
countered · May 16, 2023 at 7:48 pm
Ꭲhanks for sharing your tһoughts. I really
appreⅽiate your efforts and I will ƅe waiting for your fսrthеr post thanks once again.
eloise · May 22, 2023 at 1:21 pm
Goօd artіcle. I’m faϲing some of these issues aѕ
well..
poisoning · May 24, 2023 at 10:57 am
Hell᧐ there! I could have sworn I’ve visited thіs web site
before but аfter ⅼooking at a few of the posts I reaⅼized it’s
new to me. Regardleѕs, I’m defіnitely delighted I came across it and I’ll be bookmarking it and checking back often!
sagging · May 26, 2023 at 4:58 am
Hi would you mind sharing which blog platform ү᧐u’re working ԝith?
I’m gⲟing to start my own blog ѕoon but I’m having a ԁifficᥙlt time deciding between BlogEngine/Wordpress/B2evolution and Drᥙpal.
The reɑson I ask is because youг design and stylе
seems different then most blogs and I’m looking for something unique.
P.S Sorry for being off-topic but I had tⲟ asк!