Exercise » Bibliography (Work with a Web Safe Font)

In this lesson, you will use h1 and h2 as intended. You will also use p, text-indent, margin, padding, <em>, <strong>, and a class.

Typographically, you will practice choosing a font based on what it has to offer: roman, italic, bold, caps, and numbers.

Overview of Part One of the Assignment

In the first part of the lesson, you will create a bibliography with section headings and italicized titles.

  1. Use the text file 3_bibliography.doc provided.
  2. Typeset the bibliography, using either the Verdana or Georgia font family. Use only one font family.
  3. Write about what you see. Analyze the caps, numbers, bold, and italic. Does your font provide emphasis and contrast within the family? Do the counterforms start to fill in? What kind of numbers does your font have (lining or old style)? Feel free to use colloquial terms, like “gets lost” or “stands out.”
example of part one

Working with the text provided, Chris Nelson designed this Bibliography (Part One only) using Verdana.

Getting Started

Create a Folder

In the web_typography_yourlastname folder, create a folder for the lesson. Call it bibliography.

Start the HTML File

In your text editor, create a new document, and save it as index.html in your bibliography folder.

Add the Basic HTML Syntax, Title, and Link to the CSS File

Add the following code to your index.html file. Every HTML file needs this basic syntax. It includes a unique title for your page as well as a link to a unique CSS file. You can type it in… or you can copy it from the last assignment and make changes as needed.

<!DOCTYPE html> 
<html>
 
<head> 
<title>Bibliography</title> 
<meta charset="utf-8"> 
<link href="bibliography.css" rel="stylesheet" type="text/css">
</head> 
 
<body>
  
</body> 
</html>

Add the Content

Between the <body> tags, paste the text from 3_bibliography.doc.

View Your Web Page

Save your HTML document, and view it in your browser. Without h1, h2, and p tags, the text runs together. Quotation marks from the Word document might flow in as weird syntax, which you will fix later.

text running together

Without h1, h2, and p tags, the text runs together.

weird syntax

Quotation marks from the Word document can flow in as weird syntax. If this happened to you, you’ll fix it later.

Define the Text Elements

You’ll use a variety of tags to organize the text. First, identify the main heading (Bibliography) and wrap it in h1 tags, as follows:

<h1>Bibliography</h1>

Identify and define each subheading (Typography, CSS, and Grids) with h2 tags:

<h2>Typography</h2>
<h2>CSS</h2>
<h2>Grids</h2>

Identify and define each of the nine items (book, article, or blog) with p tags:

<p>Allen, Dean. "Reading Design." A List
Apart: For People Who Make Websites. A 
List Apart Mag., 23 November 2001. Web. 
28 December 2009.</p>

View Your Web Page

Save your HTML document, and view the changes. The bibliography is broken up into the main heading, subheadings, and nine individual items.

You still need to fix some things, though…

Put Your Bibliography in a div

You want the bibliography to live inside a div, so you can control the line-length. Add the div tags around your content. Start the div right before your content starts, like so (new syntax is in bold):

<div id="main_container">
<h1>Bibliography</h1>
…

End the div right after the content ends, like so (new syntax is in bold):

… print. </p>
</div>

Start Writing the CSS File

In your text editor, create a new document, and save it as bibliography.css in your bibliography folder.

Describe the div ID

Make your main_container div a white rectangle (400px wide) with a black border (1px), centered in the browser.

Remember, you describe an ID by setting up the element like so:

#main_container{
}

If you can’t remember how to style the div, that’s OK! You’re just getting started, and writing syntax takes practice. Use the CSS Cheat Sheet provided. If you need more help, follow the instructions covered earlier in the Word Connotations lesson.

Save Your HTML Document and View the Changes

You already linked to the CSS file when you started the HTML file. So you should see the text is in a reasonable column, but it’s too close to the border of the div. Next, you add some padding (space inside an element) to give the text a little breathing room.

Add Padding

To add the same amount of padding all the way around (20px, for example), add the following syntax to the list of property:values; for the #main_container in CSS:

padding:20px;
padding added to div

Top: Without padding, the text is right up against the border of the div. Bottom: With 20px padding all around, you have space between the text and the border of the div. Notice that the padding increased the amount of space occupied by the div. The 400px div now takes up 440px.

Now your #main_container syntax looks like this (new syntax in bold):

#main_container{
   width:400px;
   border-width:1px;
   border-style:solid;
   margin-top:20px;
   margin-right:auto;
   margin-bottom:0px;
   margin-left:auto;
   background-color:#ffffff;
   padding:20px;
   }

If you want to add different amounts of padding on each side, you can do that. Simply set a different padding for the top, right, bottom, and left sides:

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

Note: If you already know how to write CSS shorthand, feel free to use it instead. I don’t use shorthand in TWD exercises.

Style the p Element

Now that the div is set properly, it’s time to attend to the typography. Continue working in your CSS file.

Style the p just like you styled the heading elements in the previous exercise. As always, start by setting up the element like so:

p{
}

Make your text look the way you want it to look. I use Georgia 15/22, but you might use a slightly different size, or you might even use Verdana. Write your syntax accordingly.

My text is Georgia 15/22px, left-aligned, with no spaces between the paragraphs. So my syntax looks like this:

p{
   font-family: georgia;
   font-size: 15px;
   line-height: 22px;
   }

Remove Spaces Between p Elements

Remember those big spaces between each word connotation in the last exercise? They were there because elements have default margin and padding. By specifically setting margin and padding to 0px, you override any default spaces that browsers add to p tags.

Set the margin and padding to 0px like so (new syntax in bold):

p{
	font-family: georgia;
	font-size: 15px;
	line-height: 22px;
	margin: 0px;
	padding: 0px;
	}

You can (and will) alter this syntax to add a bit of controlled space to the text. But for now, leave margin and padding at 0px.

Change the Left Margin to Outdent

Bibliographies are set so all lines except the first are indented; the first line of each item is outdented.

To outdent the first line, you add left margin to the text (moving all the text in a bit) and then remove the extra left margin on the first line only (so the first line “outdents”).

The p tag currently has a 0 margin all the way around (margin:0px;). You need to change the margin so that the left margin is 22px but all the others remain 0px. One way to do this is to replace the margin:0px; with lines that specifically set the measurement for each side, like so (new syntax in bold):

p{
	font-family: georgia;
	font-size: 15px;
	line-height: 22px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 22px;
	padding: 0px;
	}

This pushes all the text over 22px. Next, to remove the extra left margin on the first line only, add the following line:

text-indent: -22px;

You can add the text-indent syntax anywhere in the description of your p element. I prefer to put it immediately after margin-left, so I can quickly see their relationship. Your CSS syntax for the p tag now looks something like this:

p{
   font-family: georgia;
   font-size: 15px;
   line-height: 20px;
   text-align: left;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 22px;
   text-indent: -22px;
   padding: 0px;
   }

Save Your HTML Document and View the Changes

Now when you view your page in the browser, each of the nine items in the list has an outdent.

outdented text

Each item in the list outdents on the first line. You added a left margin and removed it from the first line of each paragraph by using the text-index property. A common rule in typography is to set your indent equal to your line height. The line height in this example is 22px, so the left margin is also 22px.

Add a Bit of Space After Each Paragraph

The text looks fine with no space after it. The hanging first line of each paragraph helps chunk the text into items. But if you’d like to add a little space below each item, you can. Simply add in some bottom margin, by changing the 0px like so:

p{
   font-family: georgia;
   font-size: 14px;
   line-height: 20px;
   text-align: left;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 5px;
   margin-left: 22px;
   text-indent: -22px;
   padding: 0px;
   }

The browser will now apply the 5px margin to the bottom of each p element.

Italicize the Titles by Applying the <em> Element

Sometimes, you want to place emphasis on words within a line or paragraph of text. Thus far, you’ve used heading tags and the p tag, all of which automatically add a line break to the text. How do you emphasize one or more words without inserting a line break?

One way to do this is to use the <em> element. There are two kinds of “em” in HTML and CSS. One kind of em is a unit of measurement. The other kind — the kind you will use throughout TWD3 — stands for emphasis.

Apply <em> in the HTML

In the HTML file, add the following syntax around each book and website title:

<em></em>

Don’t italicize titles of articles, which already use quotation marks. For example, here is the first title done for you (new syntax in bold):

<p>Allen, Dean. “Reading Design.” <em>A List Apart: For People Who 
Make Websites.</em> A List Apart Mag., 23 November 2001. Web. 28 December 
2009.</p>

Save Your HTML Document and View the Changes

After you save the document and refresh it in your browser, you’ll see that all the book and website titles are italicized.

Italicized titles

Book and website titles are italicized by means of the <em> element. Don’t italicize the titles of articles, which are already in quotation marks.

Styling the em in CSS is Not Necessary for This Exercise

Using em to italicize the titles worked. And you didn’t have to describe the em in CSS. Why? Because em is styled as font-style:italic; by default. You are using a web-safe font family with an italic version, and you want your emphasized text in italics, so you don’t have to touch the CSS.

Using em can be more flexible, and more complicated. You can use CSS to make the em look however you want it to. But for now, the em does exactly what you need it to do.

Fix the Quotation Marks

When you specified Georgia or Verdana, the quotation marks may have appeared to fix themselves, because both fonts recognize the smart (curly) quotes imported from the Microsoft Word document.

But the quotation marks will still show up as weird syntax in some browsers. So even if the quotation marks look fine in your browser, you need to fix them so they’ll work correctly in all browsers. Go into your HTML, and replace all left quotation marks with the following code:

&ldquo;

Then replace all right quotation marks with this code:

&rdquo;

Save your file, and view your document in the browser to see the changes. I talk about quotation marks in detail in a later in TWD.

Describe Your Headings

The main heading

The main heading is Bibliography. This heading should stand out the most. Using the same font, try using a typographic characteristic—size, weight, style, or case—to emphasize the heading. You can even describe margin and padding like you did for p in this lesson.

Remember, you start to describe a h1 by setting up the element like so:

h1{
}

If you can’t remember how to style an h1, use the CSS Cheat Sheet provided. If you need more help, follow the instructions in the previous lesson.

The subheadings

The bibliography is separated into three sections: Typography, CSS, and Grids. These subheadings should stand out more than the text but not as much as the main heading. Again, try picking one way to emphasize the subheads: size, weight, or case. As always, start by setting up the element like so:

h2{
}

When your h1 and h2 are described, move on to part two of the exercise.

Part Two

Overview of Part Two of the Assignment

In this part of the lesson, you will add an introductory paragraph to the bibliography.

    1. Use the text file 3_bibliography_intro.doc provided.
    2. Typeset the introduction so it looks different from the rest of the text.
    3. Set three of the words in the introduction with strong emphasis.
An example of the Bibliography

Evan Boisvert designed this Bibliography using Georgia.

Getting Started

In this part of the exercise, you modify the bibliography from part 1, so just continue working with the same files.

Add and Define the Intro Paragraph

After the main heading, and before the first h2, paste the text from 3_bibliography_intro.doc. The new content is a paragraph of text, so make sure you define it by wrapping it (e.g., put a pair of tags around it) in a pair of <p></p> tags.

View Your Web Page

After you save the document and refresh it in your browser, you’ll see that the new paragraph is in place. But it is outdented — just like the bibliography items.

Bibliography with intro paragraph

The introductory paragraph is in place, but it’s incorrectly outdented, like the bibliography items.

Change the Introductory Paragraph

The introduction is a paragraph and is correctly defined as a paragraph, but it shouldn’t outdent. It’s not an item in the bibliography. You only have one p element to use in HTML, but you need two different styles of paragraphs.

How do you get around this problem? Create and apply a class to your introductory paragraph.

Create a Class in the CSS

In the CSS file, add the following syntax:

.intro{
   text-indent: 0px;
   margin-left: 0px;
   }

The class selector looks different from heading and p selectors because you’re not describing an element (h1, p, div)… you’re describing a class that can be applied to an element. To create and describe a class in CSS, you must precede the name with a dot (.). Thus the class selector becomes .intro.

I’ve named the class “intro” because it will be applied to the intro paragraph. In HTML and CSS, you can name classes whatever you want to. Just make sure the class name in your HTML matches the class name in your CSS.

Apply the Class in the HTML

To apply a class to an element in HTML, add the class (don’t include the dot) to the element. In this lesson, apply the class to the opening <p> tag for the introductory paragraph. Your syntax should look like this:

<p class="intro"> Web typography lives at the intersection of 
tradition and technology. Thus, web typographers can learn… </p>

Notice the ending tag remains the same:

</p>

When the paragraph ends, the class ends with it!

Save Your HTML Document and View the Changes

After you save the document and open it in your browser, you’ll see that the introductory paragraph no longer has an outdent, and the text of the paragraph lines up with the headings!

The Difference Between Class and ID

You wanted to make a certain paragraph have a certain style, so you applied a class (.intro) to it. But you’re also using a div that you styled by applying an ID (#main_container) to it. What’s the difference?

An ID is unique and can only be used once in a document. A class can be used over and over again in the same document.

Emphasize Some Words by Applying the <strong> Element

Sometimes you want to place more emphasis on words within a line or paragraph of text. You’ve already used the <em> element to italicize titles in the bibliography listing. Now you’ll apply <strong> to make other words pop out of the introductory paragraph.

Apply <strong> in the HTML

In the HTML file, add the following syntax around the words Typography, CSS, and Grids in the introductory paragraph (NOT the headings!):

<strong></strong>

For example, here is the first word done for you:

… some of my favorite references in <strong>Typography</strong> (all are on 
the theoretical side, …

Save Your HTML Document and View the Changes

When you save the document and refresh it in your browser, you’ll see that the words are now bold.

example of the strong element in use

Typography, Gris, and CSS are now bold by means of the <strong> element.

Style the <strong> in CSS so it Works with Your Text

Using <strong> to strongly emphasize the words worked. And you didn’t have to describe the strong in CSS. Why? Because strong is styled as font-weight:bold; by default. If you are using a web-safe font family with a bold version, and you want your strongly emphasized words in bold, you don’t have to touch the CSS.

Of course, if you don’t want your strongly emphasized words in bold, you can change the way they look. For example, I think bold is too strong for my layout; I’m not using bold anywhere else on the page. I’d rather my strongly emphasized words mimic the h2.

Style the <strong> just like you styled the other text elements. Apply case, weight, and style as needed. For example, I want my strong elements to be normal weight, all caps, with 1px letter-spacing, so I wrote the syntax like this:

strong{
   font-weight: normal;
   text-transform: uppercase;
   letter-spacing: 1px;
   }

View Your Web Page

After you save the document and refresh it in your browser, you’ll see that the strongly emphasized words have changed.

Validate your Files

Once you have your strongly emphasized words looking they way you want them to, validate your files. Always validate your files. Even if I don’t tell you to.

Quick Tips

CSS Resources
Project Resources