Use quote marks to find an "exact phrase"

Print version

print icon

30: Creating a content page 2

Styling the headings and text

Apply class attributes, enter the CSS

Now it's time to style the three heading levels and the paragraph text. From the HTML box, copy the class attributes (highlighted) for each of the headings and the paragraph and carefully paste it in the same place (i.e. inside the opening tags) in your HTML. The headings and paragraph text now each have a class.

From the CSS box underneath, copy the rulesets (highlighted) for the treepagetitle, majorheading, minorheading and treebodytext styles. Paste them in your stylesheet. Save.

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 class="treepagetitle"> Heading </h1>	
	<h2 class="majorheading"> Heading </h2>
	<h3 class="minorheading"> Heading </h3>
	<p class="treebodytext"> 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;
	}
															
.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%;	
}															
															

See how it looks

Refresh your browser to see how it looks. It should look like this.

Look at the CSS changes

Take a few moments to have a good look at the properties and the values you have entered in the CSS, and the effect on the content of your webpage. You'll see that the new CSS has overridden some of your default CSS (and it has overridden some of the browser defaults as well).

Most of the CSS relates to standard text and paragraph formatting, so it should be self-explanatory. But note how the margin changes are limited to specific cases of margin-bottom. The default margin settings still apply for all else – margin-top, right and left.

Feel free to experiment with the properties and values to see what happens.

Add some content

Time to add some content to your HTML page, but before you do…

This is all you should have for now:


<h1 class="treepagetitle">
The splendours of Hoop Pine
</h1>													  
<h2 class="majorheading">
What we all need to know about Hoop Pine
</h2>														
											

Now enter the minor headings and paragraphs by copying the code below and pasting it underneath the (h2) major heading. You'll notice it's just a single heading/paragraph combination written three times. Save.


<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>															
														

Your HTML (i.e. the code) should now look like this. Don't worry if the spacing and indenting is not exactly the same.

See how your web page looks

Refresh your browser to see how your web page looks. It should look like this (different tab). Note the margins for the paragraph text; a noticeable amount on the right and underneath, but nothing on the left or above – as specified in your CSS.

Click here to remind yourself how the finished content page will look.