Open the HTML and CSS files
With your text editor, open the HTML file (content.htm) and the stylesheet (mystylesheet.css) you were experimenting with in Lesson 14. Also open content.htm with your browser.
Delete all the content in the stylesheet.
HTML changes
You will start by changing the html.
Alter the <head> section
In the <head> section, adjust the page title and the content description. This page, your first general content page, will be about Hoop Pine, so that can be the page title. The page will tell us what we all should know about Hoop Pine, so ensure the description section reflects that.
There is no need to make any further changes to the head section.
The <body> section
Delete the 'pink' class attribute from the paragraph element.
Give the <body> tag an ID attribute, "treecontentpage"; this will allow you to specify CSS styling for the page. Your HTML should appear as below. (There will never be any highlighting in the actual code.)
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">
<h1> Heading </h1>
<h2> Heading </h2>
<h3> Heading </h3>
<p> The quick brown fox jumps over the lazy dog. </p>
</body>
</html>
CSS
CSS styling
Enter default styling
In the stylesheet, you will enter some of the default styling you read about in a previous lesson. Copy from the CSS box below and paste it into your stylesheet. Save.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page title</title>
<link rel="stylesheet" href="../mystylesheet.css">
<meta charset="UTF-8">
<meta name="description" content="My first web page">
<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">
<h1> Heading </h1>
<h2> Heading </h2>
<h3> Heading </h3>
<p> The quick brown fox jumps over the lazy dog. </p>
</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;
}
Page styling
Copy the ruleset for the ID of treecontentpage from the CSS box below and paste it into your stylesheet. The colour, lightcyan, was chosen from this great site.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
<link rel="stylesheet" href="../mystylesheet.css">
<meta charset="UTF-8">
<meta name="description" content="My first web page">
<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">
<h1> Heading </h1>
<h2> Heading </h2>
<h3> Heading </h3>
<p> The quick brown fox jumps over the lazy dog. </p>
</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;
}
See how it looks
Refresh your browser to see how it looks. It should look like this. Notice the background colour, the font style, the font sizes, and lack of space between lines. All this is as you have specified it in your CSS. Try changing the values in the CSS to see what happens (remember to save the changes and refresh the browser.)
In this and the examples in subsequent lessons don't be too concerned about minor differences between your practice page and what you see in the samples shown in these lessons. They will never be exactly the same.
Click here to remind yourself how the finished content page will look.