Putting HTML and CSS together

Now you know about HTML and CSS you can put them together to achieve something. In the example below we will give a paragraph a pink background.

The HTML, on the left, consists of a paragraph of the class "pink'. In the CSS, on the right, is the ruleset for the 'pink' class. The only property in the ruleset is 'background-color' (note the hyphen and American spelling), and the value is 'pink'. The result underneath shows the paragraph with a pink background.

	
<p class="pink">
This paragraph has a pink background.
</p>
															

	
.pink {		
	background-color: pink;
	}
															

Now it's time to specify a few other properties, in this case a different font ('font-family') and a smaller font size (80% of the default size). The result is visible below. Whatever we don't specify retains the default values of the browser.

	
<p class="pink">
This paragraph has a pink background.
</p>
															

	
.pink {		
	background-color: pink;
	font-family: courier;
	font-size: 80%;
	}
															

Exercise

In this exercise you will return to the ‘content.htm’ document you were working on in Lesson 10. With your text editor, open ‘content.htm’ and ‘mystylesheet.css’.

Below you can see the content that you entered in the content.htm page. (Don't forget that this is just the visible content – the head section and other non-visible content is not shown here.)

	
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<p>The quick brown fox jumps over the lazy dog</p>															
															

Now open the content.htm file in your browser (control + o) to remind yourself how it looks.

Enter the CSS for the paragraph text

You will now enter some CSS in your stylesheet to change the appearance of the paragraph text.

Note: When you copy and paste the code samples below, and in all others to follow, do not copy the 'HTML' or 'CSS' heading.

On the right below is a CSS ‘ruleset'. Copy and paste it into your stylesheet (CSS file) and save. Note the selector (.pink); it selects the 'pink' class i.e. any element that has that class.

In the HTML document, give the paragraph element the pink class by adding a class attribute with the value of 'pink', as shown in the box on the left. Save.

	
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<p class="pink">The quick brown fox jumps over the lazy dog</p>															
															

	
.pink {		
	background-color: pink;
	font-family: sans-serif;
	}
															

Refresh your browser to see how it looks.

Notice how the paragraph text has a pink background, and that it extends across the whole page. It does so because the paragraph element <p> is a ‘block’ element, so it takes up the full width of the page. You will also see that the font has changed.

Enter the CSS for the heading elements

You will now enter some CSS in your stylesheet to change the appearance of the heading elements.

Copy the h1, h2 and h3 rulesets in the CSS box below and paste into your stylesheet. Save.

Notice that the selectors are of a different type. For the paragraph styling (i.e. class="pink") you selected a class; in this case you are selecting by the type of element (i.e. h1, h2 and h3 elements). Selecting by element type is described in the next lesson.

	
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<p class="pink">The quick brown fox jumps over the lazy dog</p>															
															

	
h1{		
	background-color: pink;
	font-family: sans-serif;
	font-size: 200%;
	}
	
h2 {		
	background-color: pink;
	font-family: sans-serif;
	font-size: 150%;
	}

h3 {		
	background-color: pink;
	font-family: sans-serif;
	font-size: 120%;
	}														
															
.pink {		
	background-color: pink;
	font-family: sans-serif;
	font-size: 100%;
	}
															

Refresh your browser to see how it looks

You will note that the pink background for each of the headings also extends across the whole page. This is because heading elements are ‘block’ elements. You will also see the effect of setting the font-size values, as well as the sans serif font.

Experiment by changing the values. Have fun – you can’t cause any harm. It may help to refer to Lesson 4 on CSS values.

Save and close your HTML document.