Header
In this lesson you will add the header to your content page.
- The header will contain white text.
- The header text will be used to link to the Home page.
<header> tags and header paragraph text
You will remember that <header> is a semantic container element. Below is the header you'll soon be entering in your html. you'll see a paragraph of text is between the header opening and closing tags.
<header>
<p>My wonderful world of trees</p>
</header>
Class attribute for <header>
Here is the header with a class attribute.
<header class="treeheader">
<p>My wonderful world of trees</p>
</header>
Making the header text a link
Like the Home link, the header text will be a link to the Home page.
The Home page is a 'level up' from the file you are working on (which is in the 'pages' directory), so the file path in the link will need to have../ before the file name of the home page. You can see this in the highlighted code below.
<header class="treeheader"><a href="../home.htm">
<p>My wonderful world of trees</p>
</a></header>
CSS styling
Below is the CSS styling for the header. Once again, it is mostly common font/paragraph formatting that should be self-explanatory, but a few notes may help.
The header has the class of 'treeheader'. We will be styling the header to be grey, with a height of 10vh and a width of 100% (i.e. all the way across).
The paragraph inside the header doesn't have a class or ID. Instead, we have a ruleset that applies to all paragraphs inside the header ('all paragraphs that are descendants of an element of class treeheader'). You learnt about this way of selecting in Lesson 16.
The selector in the third ruleset is similar, but it selects links ('a') instead of paragraphs. So it selects all links inside elements with the treeheader class. This allows us to select the home link in the header and give it its own styling rules. We'll be styling it so it's white and with no underlining.
We're styling the home link in the header this way because we don't want it to look like a link. People expect it to be a link anyway, even if it doesn't look like one, and we want it to look pretty!
.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;
}
Entering the HTML and CSS
From the HTML box below left, copy the header element (highlighted) and paste it into your HTML directly under the body opening tag as shown (above the Home link).
Now copy, from the CSS box, the rulesets for .treeheader, .treeheader p and .treeheader a (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>
</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;
}
See how it looks
Refresh your browser to see how it looks. It should look like this. Remember that the links are functional, but they link to a Home page that is still empty.
As always, feel free to experiment with the properties and values to see what happens.