Span Class

Ok, now that you have learned how to use a class to modify an entire block of text, let's look into customizing a portion of text inside a larger block, without creating an entirely new paragraph.

The answer is to use a span class, which "spans" across the selection you wish to modify.

First, let's create a new class which we might want to use. Since we already modified the notes section at the end of the document, we should modify the actual footnotes which are embedded in body paragraphs. The footnotes should be smaller, and perhaps take on a different color to help them stand out. Create a new class called footnote, and make the font-size smaller:

Now let's take advantage of this new class to span across a selection of text in the main body of the document. The basic syntax of the span class looks like this:

So, if we were to take advantage of the footnote class to modify the first footnote, our markup would like this:

Take a look at the example... see that cute little footnote at the end of the paragraph:

Looks cute, but the footnote is usually at the top of the line of text, not the bottom. Let's learn a new property! It's called vertical-align and it does just what it says. The possible values for the vertical-align property include top, middle, and bottom; text-top and text-bottom; super (for superscript) and sub (for subscript); and of course, inherit! I'm going to try text-top, because I find super to be a little too high:

Remember, you should experiment with yours! See what these things can do!