Use quote marks to find an "exact phrase"

Print version

print icon

Home

33: Creating a content page 5

Next lesson >

In this lesson

In this lesson you will add the footer to your content page.

Footer tags and paragraph content

You will remember that <footer> is a semantic container element. Below is the footer you'll be using in your content page. A paragraph of text is between the footer opening and closing tags. 


<footer>
<p>Hoop Pine</p>
</footer>

Class attribute

Here is the footer with a class attribute. 


<footer class="treefooter">
<p>Hoop Pine</p>
</footer>

CSS styling

Here is the CSS styling for the footer. It should mostly be self-explanatory, but a few notes may help.

You will be familiar with the position property from Lesson 20. You can see that it is 'fixed', and set at '0' distance from the bottom of the viewport. Note the background colour and the white text.

The paragraph inside the footer doesn't have a class or ID. Instead, we have a ruleset that applies to all paragraphs inside the footer ('all paragraphs that are descendants of an element of class treefooter'). You learnt about this way of selecting in Lesson 16. 


.treefooter {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 4em;
  background-color: firebrick;
  }

.treefooter p {
  text-align: center;
  line-height: 4em;
  color: white;
  }

Why the footer is 'fixed'

The footer is 'fixed' to keep it at the bottom of the viewport. This is needed because the default, 'static' positioning leaves a 'gap' under the footer when there is insufficient content to fill the height of the screen.

This is just a little quirk of HTML/CSS. There are other workarounds available, but they are beyond the scope of this course. This is not an issue when there is sufficient content to fill the height of the screen.

When you have sufficient content to fill the screen you may wish to leave the footer with the default, 'static' positioning.

Entering the HTML and CSS

From the HTML box below left, copy the footer element (highlighted) and paste it into your HTML directly under the </article> (closing) tag near the bottom as shown.

Now copy, from the CSS box, the rulesets for .treefooter and .treefooter p (highlighted), and paste them into your CSS as shown.

HTML 

	
<!DOCTYPE html>		
<html lang="en"> 
 <head>		
  <title>Hoop Pine</title>
  <link rel="stylesheet" href="../mystylesheet.css">
  <meta charset="UTF-8">
  <meta name="description" content="What we should all know about Hoop Pine">
  <meta name="keywords" content="html, css">
  <meta name="author" content="My Name">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">		
 </head>
 <body id="treecontentpage">

<header class="treeheader">
<a href="home.htm"><p>My wonderful world of trees</p></a>
</header>
<a href="../home.htm"><p id="treehomelink">
Home
</p></a>
<h1 class="treepagetitle">The splendours of Hoop Pine
</h1>													  
<article class="treecontentarticle">
<h2 class="majorheading">What we all need to know about Hoop Pine
</h2>
<h3 class="minorheading">Habitat
</h3>													  
<p class="treebodytext">
Araucaria cunninghamii is a species of Araucaria known as <i>Hoop Pine</i>. Other less commonly used names include colonial pine, Queensland pine, Dorrigo pine, Moreton Bay pine and Richmond River pine. The scientific name honours the botanist and explorer Allan Cunningham, who collected the first specimens in the 1820s.
</p>													  
<h3 class="minorheading">Habitat
</h3>
<p class="treebodytext">
Araucaria cunninghamii is a species of Araucaria known as <i>Hoop Pine</i>. Other less commonly used names include colonial pine, Queensland pine, Dorrigo pine, Moreton Bay pine and Richmond River pine. The scientific name honours the botanist and explorer Allan Cunningham, who collected the first specimens in the 1820s.
</p> 
<h3 class="minorheading">Habitat
</h3>
<p class="treebodytext">
Araucaria cunninghamii is a species of Araucaria known as <i>Hoop Pine</i>. Other less commonly used names include colonial pine, Queensland pine, Dorrigo pine, Moreton Bay pine and Richmond River pine. The scientific name honours the botanist and explorer Allan Cunningham, who collected the first specimens in the 1820s.
</p>
</article>
<footer class="treefooter">
 <p>
 Hoop Pine
 </p>
</footer>
</body>	
</html>

CSS 

	
html {
	color: black;
	font-family: sans-serif, sans;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
	text-align: justify;	
	}
											
*   {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	}																				

img {
	max-width:100%;
	border: none;
	outline: none;	
	}
	
#treecontentpage {
	background-color: lightcyan;
	}
															
.treepagetitle {
	text-align: center;
	font-size: 290%;
	font-weight: 700;
	line-height: 5em;
}
																
.majorheading {
	text-align: left;	
	font-size: 160%;
	font-weight: 700;
	margin-bottom: 0.8em;	
}
												
.minorheading {
	text-align: left;	
	font-size: 115%;
	font-weight: 500;
	margin-bottom: 1%;	
}

.treebodytext {
	margin-right: 6%;	
	margin-bottom: 4%;	
}

#treehomelink {
	margin-top: 2vh;
	margin-left: 5vw;	
	font-size: 110%;
	font-weight: 600;
	}	
	
.treecontentarticle
	width: 60%;
	margin-right: auto;
	margin-left: auto;
	}																												

.treeheader {
	background-color: gray;
	height: 10vh;
	width: 100%;
	}

.treeheader p {
	font-size: 200%;
	font-weight: 600;
	text-align: left;
	color: white;
	line-height: 10vh;
	margin-left:5vw;
	}
													
.treeheader a {
	text-decoration: none;
	}													
		
.treefooter {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 4em;
	background-color: firebrick;
	}

.treefooter p {
	text-align: center;
	line-height: 4em;
	color: white;
	}

See how it looks

Refresh your browser to see how it looks. It should look like this. Feel free to experiment with the properties and values to see what happens.

<Previous lesson

Next lesson>