Exploring Computer Science: Web Unit

Reusable Code

A basic premise of modern web design is separating presentation from content. This is accomplished by storing css stylesheets in separate files from html files.

If we have a stylesheet named style.css, there are two methods for embedding it into our html page. Either statement can be placed in the head section of our HTML page. This allows easy sharing of common CSS styles across many HTML pages.

We have already seen that css rules can be used to modify the style of any html block. For example, we might want a css rule for all paragraphs to have a specific font color and have a specific background color:

Introducing Classes and IDs

One way to target a specific area of your document is by adding classes and IDs. A class css rule starts with a period whereas an ID uses a # symbol. They are very similar in their application. We'll look at classes in this lesson and IDs in the following lesson.

Let's say we wanted to present a series of famous speeches such as the Gettysburg Address. We want to present the title, author, and the content of the speech each in a visually distinct manner. Here's how our html would look after we added class definitions to our markup:

<!DOCTYPE html>
<html>
	<head>
		<title>The Gettysburg Address</title>
	</head>
	<body>
		The Gettysburg Address 
		
		Abraham Lincoln 
		
		 Four score and seven
		years ago our fathers brought forth on this continent, a new
		nation, conceived in liberty, and dedicated to the proposition
		that all men are created equal. 
		
		 Now we
		are engaged in a great civil war, testing whether that nation,
		or any nation so conceived and so dedicated, can long endure. We
		are met on a great battlefield of that war. We have come to
		dedicate a portion of that field, as a final resting place for
		those who here gave their lives that that nation might live. It
		is altogether fitting and proper that we should do this. 
		
		 But in a larger sense, we cannot dedicate - we
		cannot consecrate - we cannot hallow - this ground. The brave
		men, living and dead, who struggled here, have consecrated it,
		far above our poor power to add or detract. The world will
		little note, nor long remember, what we say here, but it can
		never forget what they did here. It is for us the living,
		rather, to be dedicated here to the unfinished work which they
		who fought here have thus far so nobly advanced. It is rather
		for us to be here dedicated to the great task remaining before
		us - that from these honored dead we take increased devotion to
		that cause for which they gave the last full measure of devotion
		- that we here highly resolve that these dead shall not have
		died in vain - that this nation, under God, shall have a new
		birth of freedom - and that government of the people, by the
		people, for the people, shall not perish from the earth. 
		
	</body>
</html>

View Current Version

Now we're ready to add css rules based on our class descriptions. We'll create a file called style1.css with the following rules:

Now we'll add the following to the head section of our html page:

View Updated Version

Sample Projects

Students will create a website with one or more movie reviews. The html page will contain the following paragraphs for each review: title, director, synopsis, review. The css stylesheet will have corresponding classes.
Students will create a website with one or more horoscopes. The html page will contain the following paragraphs for each horoscope: sign, horoscope. The css stylesheet will have corresponding classes.
Students will create a website with one or more recipes. The html page will contain the following paragraphs for each recipe: dish, instructions, ingredients. The css stylesheet will have corresponding classes.